soru sor sorular uzmanlar

Alan daralınca alta kayan div (normalde yanyana)

ibrahimyucel (1) 7 yıl önce sordu

Lütfen yardım edin projem için önemli alt alra kaymasın :( 

 

 

 

<br />
<div id="anadiv" v="">
<div style="float:left">
<div style="text-align: right;margin:1px;"><a class="hvr-buzz-out" href="" style="display: block; vertical-align: middle; transform: translateZ(0px); box-shadow: rgba(0, 0, 0, 0) 0px 0px 1px; backface-visibility: hidden; line-height: 25px; margin-bottom: 2px; text-align: center; text-decoration: none; color: rgb(216, 225, 226); font-family: Verdana, Geneva, sans-serif; font-size: 14px; width: 100%; max-width:159px; background-color: rgb(216, 225, 226);"><span style="font-size: small;"><strong><span style="color: rgb(0, 0, 0);">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</span></strong></span><span style="font-size: medium;"><span style="color: rgb(0, 0, 0);"><br />
<br />
<br />
<br type="_moz" />
</span></span></a></div>
</div>
<div style="float:left">
<div style="text-align: right;margin:1px;"><a class="hvr-buzz-out" href="" style="display: block; vertical-align: middle; transform: translateZ(0px); box-shadow: rgba(0, 0, 0, 0) 0px 0px 1px; backface-visibility: hidden; line-height: 25px; margin-bottom: 2px; text-align: center; text-decoration: none; color: rgb(216, 225, 226); font-family: Verdana, Geneva, sans-serif; font-size: 14px; width: 100%; max-width:159px; background-color: rgb(216, 225, 226);"><span style="font-size: small;"><strong><span style="color: rgb(0, 0, 0);">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</span></strong><span style="color: rgb(0, 0, 0);">&nbsp; &nbsp;&nbsp;</span></span><span style="font-size: medium;"><span style="color: rgb(0, 0, 0);"><br />
<br />
<br />
<br />
<br type="_moz" />
</span></span></a></div>
</div>
</div>
<table>
    <tbody>
        <tr>
            <td>
            <div style="width: 100%; max-width:320px; overflow: auto;">&nbsp;<br />
            <br />
            <br />
            <br />
            <br />
            <br />
            &nbsp;</div>
            </td>
            <td>
            <div style="width: 100%; max-width:320px; overflow: auto;">&nbsp;<br />
            <br />
            <br />
            <br />
            &nbsp;&nbsp;</div>
            </td>
        </tr>
    </tbody>
</table>
<br />
<div style="width: 100%; max-width:320px; overflow: auto;">&nbsp;</div>
<table>
</table>

div alan daralınca alta kayan div nasıl çözülür? div alta kayıyor

Toplam 2 cevap

alattin (16999) 7 yıl önce cevapladı

İstediğini yanlış anlamadıysam şu şekilde yapabilirsin:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>

<body>
    <style>
        .kutu {
            height: 300px;
            width: 300px;            
            background-color: #ff0000;
            display: inline-block;            
          
        }
    </style>
    <div style="min-width:650px;display:block; background-color:#0094ff">
        <div class="kutu"></div>
        <div class="kutu"></div>
    </div>
</body>
</html>

Bir taşıyıcı kutu içine diğer kutuları yerleştirip daha sınra taşıyıcı kutuya min-width yani minimum genişlik verirsen kutular tarayıcı penceresi daralsa da yan yana gelmez.

ibrahimyucel (1) 7 yıl önce cevapladı

verdiğiniz kod üzerinde oynama yaptım diğer kodun içine koydum lakin sonuç aynı mobilde alt alta kayıyor :( 

 

 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-10" />
    <title></title>
</head>

<body>
    <style>
        .kutu {
            height: 158px;
            width: 158px;            
            background-color: #D7E1E2;
            display: inline-block;            
          
        }
    </style>
        <div class="kutu"></div>
        <div class="kutu"></div>
    </div>
</body>
</html>