Question

在某些网页上，我创建了一个名为middlewrapper的主要div，它们包含左侧和中间的两个div。左侧div仅用于某些页面，并且只会占用所需的间距，而中间包装器会占用中间包装器的剩余间距。在其他页面上，当没有使用左边时，正在使用中间并且它正在消耗100％的中间包装器

提供了一个工作示例

＆＃13;

#middlewrapper	{ width: 1100px; margin: 0 auto; padding: 0; border: 0px solid #bbbbbb; background: #ffffff; overflow: hidden; }
#left		{ float: left; width: 19%; margin: 0 6% 0 0; vertical-align: top; background: green; height: 100px; }
#middle			{ width: auto;  padding: 0; background: #ffffff; min-height: 100px; overflow: hidden; background: red; height: 100px; }

＆＃13;

<div id="middlewrapper">
  <div id="left">
   Test Left
  </div>

  <div id="middle">
   Test Middle
  </div>
</div>

＆＃13;

但是现在我想创建一个名为middle和right的div，并希望自然地将div推向右边。但是，我没有任何运气，因为无论我做什么，我似乎总是将div分成两行。

提供了一个工作示例

＆＃13;

#middlewrapper	{ width: 1100px; margin: 0 auto; padding: 0; border: 0px solid #bbbbbb; background: #ffffff; overflow: hidden; }
#middle			{ width: auto;  padding: 0; background: #ffffff; min-height: 100px; overflow: hidden; background: red; height: 100px; }
#right		{ float: right; width: 19%; margin: 0  0 6%; vertical-align: top; background: blue; height: 100px; }

＆＃13;

<div id="middlewrapper">
  <div id="middle">
   Test Middle
  </div>
  <div id="right">
    Test Right
  </div>
</div>

＆＃13;

Answer 1

#middlewrapper	{ 
    width: 1100px; 
    margin: 0 auto; 
    padding: 0; 
    border: 0px solid #bbbbbb; 
    background: #ffffff; 
    overflow: hidden; 
    display: flex; // to make the children align
}

#middle { 
    flex: 1; // stretch to the available width
    width: auto;  
    padding: 0; 
    background: #ffffff; 
    min-height: 100px; 
    overflow: hidden; 
    background: red; 
    height: 100px; 
}
#right { 
    width: 19%; 
    background: blue; 
    height: 100px; 
}

<div id="middlewrapper">
    <div id="middle">Test Middle</div>
    <div id="right">Test Right</div>
</div>

以下是使用flexbox的方法。你需要将flex增长放在红色容器中才能获得备用空间。

Answer 2

这样的东西？

#middlewrapper {
  width: 100%;
  background-color: red;
}
#right {
  float: right;
  background-color: blue;
}

<div id="middlewrapper">
  <div id="right">
    Test Right
  </div>
  <div id="middle">
    Test Middle
  </div>
  
</div>

如何在同一行中对齐2 div而没有一个div具有宽度

2 个答案: