如何在不使用 overflow: hidden 方法的情况下扩展 div 以获取剩余宽度？

Question

<div id="container" style="width:100%;">
   <div id="left1" style="float:left; width:100px;">float left</div>
   <div id="left2" style="float:left; width:100px;">float left</div>

   <div id="remaining">Remaining width</div>
</div>

如何展开最后一个 div (#remaining)div 以获取剩余宽度 而不使用溢出：隐藏方法？？？ 任何其他方法使用:之前 & :之后???

检查此图像..我想要完全像第二个布局 http://i.stack.imgur.com/g6DvH.jpg

Answer 1

您输入的是 class 而不是样式。否则你很好：

<div style="width:100%;background-color:red;">
  <div style="float:left; width:100px;background-color:green">float left</div>
  <div style="float:left; width:100px;background-color:blue">float left</div>

  <div style="background-color:yellow">Remaining width</div>
</div>

尽管您可能还想查看 "display:inline-block"

Answer 2

您的 ID 必须是唯一的，内联样式的属性是 "style"。

<div id="container" style="width:100%;">
   <div id="left" style="float:left; width:100px;">float left</div>
   <div id="middle" style="float:left; width:100px;">float left</div>
   <div id="right">Remaining width</div>
</div>

Answer 3

请在不使用溢出的情况下检查此解决方案属性。

<div style="height: 100px;background: green;float:left;width: 100px;"></div>
<div style="height: 100px;background: red;float:left;width: 100px;"></div>
<div style="height: 100px;background: yellow;width: 100%;"></div>

Answer 4

您需要将 class 属性更改为 style 内联样式属性。

而且您不能有两个具有相同 ID 的元素。 ID 始终是唯一的。因此，您需要将第二个 div 的 ID 更改为 (left2)

<div id="container" style="width:100%;">
   <div id="left" style="float:left; width:100px; color:white; background:blue;">float left</div>

   <div id="middle" style="float:left; width:100px; color:white; background:red;">float left</div>

   <div id="right" style=" color:white; background:green;">Remaining width</div>
</div>

在这里工作小提琴...

DEMO fiddle with styles

DEMO fiddle with css

根据您的需要提供另一个工作演示。您需要在 right div 的左侧添加一些填充（恰好等于 div 左侧的 div 的宽度）。

Demo Fiddle with new requirements

Answer 5

<div style="width: 100%; position: relative;" id="container">
  <div id="left" style="float: left; width: 100px; position: absolute; top: 0px; bottom: 0px; background-color: #aaf">float left</div>
  <div style="float: left; width: 100px;  position: absolute; bottom: 0px; top: 0px; left: 100px; background-color: #b00;" id="middle">float left</div>
  <div style="margin-left:200px; background-color: #0b0" id="right">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonum gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.y 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd
  </div>
</div>

您必须将内部 div 的位置更改为绝对位置。

如何在不使用 overflow: hidden 方法的情况下扩展 div 以获取剩余宽度？

How to expand div to take remaining width without using overflow: hidden method?

html

css

expand