改变一个分区的宽度......和第二分区应根据第一分区进行调整

Question

所以我想要这样的东西。

有2个分区，第二个分区应根据第一个分区调整宽度！

我尝试了max-width，min-width，但我无法重现这个东西。请帮帮我

Answer 1

这就是Tables are really good所在的地方：

<table>
   <tr><td>Content Here</td><td><input type=text></td></tr>
   <tr><td>Content Here Changes</td><td><input type=text></td></tr>
</table>

否则，如果您无法使用table，则需要some more DIV elements：

<div class="asTable">

  <div>
    <div>Content Here</div><div><input type=text></div>
  </div>
  <div>
    <div>Content Here Changes</div><div><input type=text></div>
  </div>

</div>

和CSS：

.asTable{
  display:table;
}
.asTable > div{
  display:table-row;
}
.asTable > div > div{
  display:table-cell;
}

Answer 2

看看这对你有帮助

<div class="main">
  <div class="divA">
    <div class="div1">DIV 1</div>
    <div class="div2">DIV 2</div>
  </div>
  <div class="divB">
    <div class="div3">DIV 3</div>
    <div class="div4">DIV 4</div>
  </div>
</div>

CSS

.div1{
    display: inline;
    width: 20%;
    background-color: #00FF00;
}
.div2{
    position: absolute;
    display: inline;
    width: 80%;
    background-color: #FF0000;
}
.div3{
    float: left;
    display: inline;
    width: 60%;
    background-color: #FF6600;
}
.div4{
    float: right;
    position: absolute;
    display: inline;
    width: 40%;
    background-color: #ccc;
}

小提琴：http://jsfiddle.net/sgr8646f/1/

Answer 3

只需使用带包装的浮动

<Div class='wrapper'>
<Div class='left'>
Content Left
</Div> 
<Div class='Right'>
Content Right 
</Div>
    <Div class='left'>
Content Left Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</Div> 
<Div class='Right'>
Content Right 
</Div>

的CSS

.wrapper{
width: 100%;
}
 .left{
float: left;
max-width: 60%;
padding-right: 10px;
background-color: #FF0000;
}
.right{
float: right;
background-color: #ccc;
} 

http://jsfiddle.net/alex_crichton/19L9ddx6/1/

由于我输入错误的班级名称而导致错误，但是为了看起来感觉你可以选择http://jsfiddle.net/alex_crichton/19L9ddx6/5/

<Div class='wrapper'>
<Div class='left'>
Content Left
</Div> 
<Div class='right'>
Content Right 
</Div>
<br />
<Div class='left'>
Content Left Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</Div> 
<Div class='right'>
Content Right 
</Div>

CSS

.wrapper{
width: 100%;
}
.left{
float: left;
max-width: 60%;
padding-right: 10px;
background-color: #FF0000;
}
.right{
float: right;
background-color: #ccc;
} 

或

<Div class='wrapper'>
<Div class='leftfloat'>
Content Left
</Div> 
<Div class='regular'>
Content Right 
</Div>
<Div class='leftfloat'>
Content Left Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</Div> 
<Div class='regular'>
Content Right 
</Div>

CSS

.wrapper{
width: 100%;
}


.leftfloat{
float: left;
max-width: 60%;
padding-right: 10px;
background-color: #FF0000;