Question

我有4个DIV水平放置在彼此旁边。

DIV＃1 有一个固定的宽度，但也需要拉伸到容器DIV的整个高度（这已经很好了）。

DIV＃2 有固定的但不需要在其高度拉伸（这也可以正常工作）。

DIV＃3 包含文字。本文应包好。根据文本的长度（以及DIV＃3的高度），容器DIV的高度也应增加。 这不起作用。

DIV＃4 包含一些控件。它们应该是右对齐的，并且可以覆盖文本（这已经很好了）。

有什么想法吗？

这是我的代码：

＆＃13;

.container {
  background-color: black;
  min-height: 55px;
  width: 100%;
  position: relative;
  display: inline-block;
  clear: both;
  white-space: nowrap;
}

.fullheight {
  width: 30px;
  background: green;
  color: white;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.fixed {
  position: relative;
  display: inline-block;
  vertical-align: top;
  background-color: violet;
  width: 50px;
  color: white;
  margin: 2px;
  margin-left: 35px;
}

.dynamic {
  display: inline-block;
  overflow: auto;
  background: orange;
  margin: 2px;
}

.overlay {
  position: absolute;
  margin: 2px;
  right: 0px;
  top: 0px;
  background: red;
}

＆＃13;

<body>
  <div class="container">
    <div class="fullheight">
      #1
    </div>
    <div class="fixed">
      #2
    </div>
    <div class="dynamic">
      #3 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    </div>
    <div class="overlay">
      #4
    </div>
  </div>
</body>

＆＃13;

Link to fiddle

Answer 1

这是你想要它的样子吗？

＆＃13;

.container {
  background-color: black;
  min-height: 55px;
  width: 100%;
  position: relative;
  clear: both;
}

.fullheight {
  width: 30px;
  background: green;
  color: white;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.fixed {
  background-color: violet;
  width: 50px;
  color: white;
  margin: 2px;
  float: left;
  margin-left: 35px;
}

.dynamic {
  overflow: auto;
  background: orange;
  margin: 2px;
  margin-left: -110px;
  /*max-height: 100px;    if you want this to scroll at some point */
}

.overlay {
  position: absolute;
  margin: 2px;
  right: 0px;
  top: 0px;
  background: red;
}

＆＃13;

<body>
  <div class="container">
    <div class="fullheight">
      #1
    </div>
    <div class="fixed">
      #2
    </div>
    <div class="dynamic">
      #3 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    </div>
    <div class="overlay">
      #4
    </div>
  </div>
</body>

＆＃13;

Answer 2

.container {
  background-color: black;
  min-height: 55px;
  width: 100%;
  position: relative;
  display: inline-block;
  clear: both;
  /* white-space: nowrap; */ (remove)
}

因为如果你使用white-space：nowrap;它将继续在同一行，直到注意到<br>。

默认为white-space: normal;或只是将其遗弃。

Learn more about white-space on W3C

修改

离开容器：

.dynamic { display: inline-block; overflow: auto; background: orange; margin: 2px; white-space: normal; /* add to overrule parent property*/ width: calc(100% - 120px); /*use of calc() to set to maximum width minus what is already been used.*/ }

Can i use calc()?

Specificity, how to overrule and why a style is overruled on htmldog

工作示例：

.container { background-color: black; min-height: 55px; width: 100%; position: relative; clear: both; } .fullheight { width: 30px; background: green; color: white; position: absolute; top: 0; bottom: 0; left: 0; } .fixed { background-color: violet; width: 50px; color: white; margin: 2px; float: left; margin-left: 35px; } .dynamic { display: inline-block; overflow: auto; background: orange; margin: 2px; white-space: normal; width: calc(100% - 120px); } .overlay { position: absolute; margin: 2px; right: 0px; top: 0px; background: red; }

<body> <div class="container"> <div class="fullheight"> #1 </div> <div class="fixed"> #2 </div> <div class="dynamic"> #3 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </div> <div class="overlay"> #4 </div> </div> </body>

Answer 3

认为你想要一些像：

.container {
background-color: black;
min-height: 55px;
width: 100%;
position: relative;
display: inline-block;
clear: both;
//white-space: nowrap;
}

.fullheight {
 width: 30px;
 background: green;
 color: white;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
}

.fixed {
 position: relative;
 display: inline-block;
 vertical-align: top;
 background-color: violet;
 width: 50px;
 color: white;
 margin: 2px;
 margin-left: 35px;
}

.dynamic {
 position: relative;
 display: inline-block;
 width: calc(100% - 100px); //Adjust the size of your dynamic div here
 background: orange;
 margin: 2px;
}

.overlay {
 position: absolute;
 margin: 2px;
 right: 0px;
 top: 0px;
 background: red;

}

fiddle

水平DIV与文本包装

3 个答案: