Разделить экран на 2 деления и установить вторую ширину с оставшимся пространством в CSS?

Question

У меня есть 2 блока внутри строки.

Я не хочу указывать ширину первого, но хотелось бы, чтобы второе занимало 100% оставшегося пространства.Контейнер из двух div занимает 100% моего экрана.

Возможно, с помощью jQuery можно определить ширину первого div и установить второе значение, но я бы хотел сделать это в чистом видеcss.

Как я могу это сделать?

Answer 1

div.box {
  background: #EEE;
  height: 100px;
  width: 600px;
}

div.div1 {
  background: #999;
  float: left;
  height: 100%;
  width: auto;
}

div.div2 {
  background: #666;
  height: 100%;
}

div.clear {
  clear: both;
  height: 1px;
  overflow: hidden;
  font-size: 0pt;
  margin-top: -1px;
}

<div class="box">
   <div class="div1">1st</div>
   <div class="div2">2nd</div>
   <div class="clear">
</div>

Надеюсь, это помогло.

Answer 2

Если вы не хотите использовать jquery, возможно, стоит это сделать

<div style="width:100%;"> 
        <div style="float:left; display:inline-block;" class="div1">left div</div> 
        <div style="float:right; display:inline-block;" class="div2">right div</div> 
    </div> ​