Я создаю этот модуль в html и css, я бы хотел избежать использования JavaScript. Чтобы объяснить, что я пытаюсь создать, я добавил картинку.
Box A - #left будет иметь изображение внутри.
Вставка B - #right будет содержать текст внутри.
Ни ящик А, ни В не могут перекрывать друг друга.
До сих пор мне удалось построить модуль, полагающийся на (%), и получить его для масштабирования меньше или больше в зависимости от ширины браузера. Но это не совсем работает, как я намереваюсь это сделать.
Проблема, с которой я столкнулся -
Когда модуль уменьшен до наименьшего с помощью (min-width), ширина шкафа B с ним уменьшается. Это не то, что я намереваюсь осуществить, Box B должен оставаться фиксированной (px) шириной, в то время как Box A масштабируется по ширине (%).
Чтобы преодолеть эту проблему, я попытался использовать ширину вставки B (px) вместо (%). Это усугубило ситуацию - теперь, когда браузер уменьшен до самой маленькой вставки B, вы попадаете в область просмотра и прокрутки (по оси x). Вставка B должна находиться в пределах экрана просмотра даже в наименьшем масштабе. Любые идеи о том, как это сделать? Благодарю.
Html -
<div id="outer">
<div id="left">Box A</div>
<div id="right">Box B</div>
</div>
Css -
#outer {
background-color:#830000;
margin:0px 0px 0px 0px;
max-width:815px;
min-width:518px;
position:relative;
width:100%;
z-index:1;
}
/*Box A*/
#left {
background-color:#b1b1b1;
float:left;
padding-bottom:57%;
position:absolute;
width:72%;
height:10px; /* extra 10px helps show overlap of #left onto #right*/
z-index:2;
}
/*Box B*/
/*Switch between #right(px) and #right2(%) for the two outcomes I'm getting*/
#right { /* using px - Good - the width is fixed, But - should not overlap #left */
width:229px;
background-color:#81dd27;
float:right;
padding-bottom:57%;
position:relative;
z-index:1;
}
#right2 { /*using % - Good - no overlapping, But - the width of 229px decreases*/
width:28%;
background-color:#81dd27;
float:right;
padding-bottom:57%;
position:relative;
z-index:1;
}
"px" и "%" - плохая идея.
Используйте медиа-запрос и задайте фиксированный размер для двух столбцов.
HTML
<div id="main">
<div class="left" id="c1">l</div>
<div class="left" id="c2">l</div>
<div class="clear"></div>
</div>
CSS
*{margin:0;padding:0}
.clear{clear:both;}
.left{float:left;height:300px;}
#main{width:100%;min-width:518px;}
#c1{background:red;width:72%;}
#c2{background:green;width:28%;}
@media screen and (max-width: 518px) {
#c1{width:290px;}
#c2{width:228px;}
}
Я не уверен, что отвечает на ваш вопрос...