Поместить два div рядом друг с другом и один растянуть, чтобы занять место

Question

Поместить два div рядом друг с другом и один растянуть, чтобы занять место

0

Я пытаюсь выполнить макет ниже с div. Мой текущий код не работает. Как мне это сделать?

благодаря

Текущий код: jsfiddle

Фактические элементы в моем коде:

#body_block
{
    background-color: #B8B8B8;
}
#body
{
    background-color: #BFBFBF;
}
#body_left
{
    float: left;
    margin-right: 50px;
    background-color: #FFE0F8;
}
#body_right
{
    background-color: #E1FFE0;
}

BentCoder 08 нояб. 2013, в 11:07

Источник

Теги:

html

css

4 ответа

0

вы также добавляете свойство position css

Я имею в виду положение: относительное; к внешнему делению, внутри которого присутствуют две левые и правые деления.

затем используйте один и тот же float: left и float: справа налево и вправо, соответственно.

Я думаю, это сработает.

Ranjit Swain 08 нояб. 2013, в 08:08

0

на тебе

#body_right
{  
    float:left;
    background-color: #E1FFE0;
}

вам также нужно добавить левую настройку поплавка, а затем на вашем footer_block вам нужно добавить четкость : both;

   #footer_block
  {
       clear:both;
   background-color: #B3B3B3;
 }

должен помочь вам начать

Simon Davies 08 нояб. 2013, в 07:27

0

1. Фон блока корпуса стал белым. 2. #body_right не будет растягиваться, чтобы поместиться в пространство справа.
BentCoder 08 нояб. 2013, в 10:05
0

добавить высоту: 100%; к body_block должен работать как проверено локально, если вы посмотрите @BFDatabaseAdmin, то это немного лучше, так как здесь восстановлен ваш код, и это то, что я бы сделал, но не хватило времени
Simon Davies 08 нояб. 2013, в 10:18

0

1, используйте абсолютный, как это http://jsfiddle.net/yujiangshui/uz9NF/7/

2, используйте jquery, когда $ (window).load() дают низкую высоту div другую высоту div

3, используйте следующий код:

<div class="out">
  <div class="div1">
    div1
  </div>
  <div class="div2">
    div2
  </div>
</div>

и css:

.out{overflow:hidden; width:650px; margin:0 auto;}
.div1{padding-bottom: 5000px; margin-bottom: -5000px; width:490px; background:#ff1; float:left; margin-right:10px;height:400px;}
.div2{padding-bottom: 5000px; margin-bottom: -5000px; width:150px; background:#ccc; float:left;height:800px;}

4, используйте <table>

Хотя мой английский плохой, но надеюсь, что мой ответ может вам помочь!

Harry Yu 08 нояб. 2013, в 07:23

Ещё вопросы

1. Фон блока корпуса стал белым. 2. #body_right не будет растягиваться, чтобы поместиться в пространство справа.
добавить высоту: 100%; к body_block должен работать как проверено локально, если вы посмотрите @BFDatabaseAdmin, то это немного лучше, так как здесь восстановлен ваш код, и это то, что я бы сделал, но не хватило времени

BentCoder · Accepted Answer · 2013-11-08T08-02-00.000Z

Решено, что я обернул оба div с помощью <section>

благодаря

/*** BODY-MYACCOUNT *************************/
section { display: table; width: 100%;}
section div { display: table-cell; border: 1px solid #000; }
#body_left
{
    background-color: #FFE0F8;margin-right: 50px;
}
#body_right
{
    background-color: #E1FFE0;width: 100%;
}

На самом деле он использует «display: table», которая заставляет его работать, а не оболочку раздела. Вы могли бы также использовать это в своем div.