Создание масштабируемого / жидкостного прямоугольного модуля с двумя колонками

0

Я создаю этот модуль в html и css, я бы хотел избежать использования JavaScript. Чтобы объяснить, что я пытаюсь создать, я добавил картинку.

Изображение 174551

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;
}
  • 0
    не могли бы вы добавить свой обходной путь HTML & CSS здесь
  • 0
    Привет, Прасант, я только что добавил свой код, надеюсь, это поможет.
Теги:
layout

1 ответ

0

"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;}
}

Я не уверен, что отвечает на ваш вопрос...

http://codepen.io/ColoO/pen/njLyD

  • 0
    Ваш Codepen хорош для ColoO, но я заметил, что пока ширина браузера не достигнет 518 пикселей, ширина зеленого поля уменьшается и уже выходит за пределы области просмотра браузера. Я размышлял об использовании медиазапросов, прежде чем заняться этим модулем, но я хотел бы посмотреть, есть ли способ обойти это, не используя их в данный момент. Я только что добавил мой HTML и CSS код, вы можете увидеть, что я разработал до сих пор.
  • 0
    Добавьте больше изображения, чтобы понять, что вы хотите. Большой экран / средний экран / маленький экран. Ура второй блок исчезнет под вашим первым блогом. Это лучшее решение? Я думаю, что «медиа-запрос» - лучшее решение, но с большим шагом. 3 медиа-запроса.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню