У меня есть 3 div-блока, первый из которых больше на левой стороне веб-страницы, а другой меньше в правой части. Я хочу, чтобы их относительное местоположение стало фиксированным во всех браузерах с любым уровнем масштабирования. Два div-блока в правом столбце выпадают ниже первого большого div, если я увеличиваю масштаб.
Вот ссылка JFFIDDLE кода, пожалуйста, увеличьте масштаб, чтобы увидеть проблему.
<div id="topdiv">
<div class="bigdiv">
<p> big div </p>
</div>
<div id="staticcal">
<p> staticcal </p>
</div>
<div id="staticnews">
<p> staticnews </p>
</div>
</div
#topdiv{
display: inline-block;
background-color:#b0c4de;
}
.bigdiv{
margin: 10px 0;
position: relative;
width: 335px;
height: 250px;
float: left;
border: 2px solid #c7930d;
}
#staticcal {
width: 220px;
height: 100px;
line-height: 175px;
float: right;
display: inline-block;
border: 2px solid #c7930d;
border-radius: 4px;
margin: 5px;
margin-top: 10px;
margin-right: 0px;
position: relative;
}
#staticnews {
width: 220px;
height: 100px;
line-height: 175px;
float: right;
display: inline-block;
border: 2px solid #c7930d;
border-radius: 4px;
margin: 5px;
margin-right: 0px;
position: relative;
}
Добавить min-width: 800px;
к id #topdiv
в вашем файле CSS.
CSS:
#topdiv {
display: inline-block;
background-color:#b0c4de;
min-width: 800px;
}
Я заметил, что вы используете border-radius
в своей разработке, поэтому я обновил ваш файл до учетной записи для использования в разных браузерах. Вот обновленный JSFiddle для вашего обзора. Кроме того, я выстроил ваши staticcal and staticnews
, добавив float: left
. Вот мини-версия вашего кода: ЩЕЛКНУТЬ ЗДЕСЬ
HTML:
<div id="topdiv">
<div class="bigdiv">
<p>big div</p>
</div>
<div id="staticcal">
<p>staticcal</p>
</div>
<div id="staticnews">
<p>staticnews</p>
</div>
</div>
CSS:
#topdiv {
display: inline-block;
background-color:#b0c4de;
min-width: 800px;
}
.bigdiv, #staticcal, #staticnews {
position: relative;
float: left;
border: 2px solid #c7930D;
}
.bigdiv {
margin: 10px 0;
width: 335px;
height: 250px;
}
#staticcal, #staticnews {
display: inline-block;
line-height: 175px;
width: 220px;
height: 100px;
margin: 5px;
margin-top: 10px;
margin-right: 0px;
-webkit-border-radius: 4px; /*This will address iOS 1 to 3.X, Android 1.6-2.1, Safari 3 - 4*/
-moz-border-radius: 4px; /*Firefox 1 to 3.6*/
border-radius: 4px; /*IE 9+, Opera 10.5, Chrome, Safari 5, FireFox 4+, iOS 4, Android 2.1+,
}
p {
text-align: center;
}