Question

我遇到这种情况：我有一个设置宽度为790px的包装div。我有两个内联div（左和右），宽度为390px。这是因为遗留问题，否则我不会用固定像素设置它们。所以问题是当左边的一个扩展并且超过390px时，右边的一个放在左边的下面。我想如果左边的一个扩大并变大，左边的一个缩小。左边的包装永远不会占用超过70％的空间。但是我无法将正确的宽度设置为30％，因为我希望当它们都不满时，具有相同的尺寸。有任何想法吗？对于那些div，可以移除390px的rull，但是我应该如何调整呢？

Answer 1

浮动第一个div并设置所需的最小和最大宽度。将隐藏的溢出添加到另一个div：

＆＃13;

body {
  font: medium sans-serif;
}
.wrapper {
  width: 790px;
  background: #CCC;
}
.wrapper:after {
  content: "";
  display: block;
  clear: both;
}
.wrapper > div:first-child {
  float: left;
  min-width: 50%;
  max-width: 70%;
  background: #FC0;
}
.wrapper > div:last-child {
  overflow: hidden;
  background: #0CF;
}

＆＃13;

<p>Case 1</p>
<div class="wrapper">
  <div>Lorem ipsum dolor sit amet</div>
  <div>Lorem ipsum dolor sit amet</div>
</div>
<p>Case 2</p>
<div class="wrapper">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed turpis libero, luctus at tincidunt eget, mollis eget augue. Praesent eu.</div>
  <div>Lorem ipsum dolor sit amet</div>
</div>
<p>Case 3</p>
<div class="wrapper">
  <div>Lorem ipsum dolor sit amet</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed turpis libero, luctus at tincidunt eget, mollis eget augue. Praesent eu.</div>
</div>

＆＃13;

Answer 2

<div class='wrap'>
<div class='span'>*tree view for a folder system*</div>
<div class='span'>file names in the folder</div>
</div>

的CSS：跨度 { display：inline-table; 向左飘浮; 保证金权利：10px; } 。跨度 { 宽度：390px; }

.wrap {
    border: 0 none;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    width: 790px
}

一行中有2个内联div，当左边的一个太大时，右边的div在另一个下面

2 个答案: