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以取剩余宽度而不使用overflow：hidden方法??? 任何其他方法使用：before＆amp; ：后???

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

Answer 1

您键入的是类而不是样式。否则你很好：

＆＃13;

<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>

＆＃13;

虽然您可能还想查看＆＃34; display：inline-block＆＃34;

Answer 2

您的ID必须是唯一的，并且内联式的属性是＆＃34; style＆＃34;。

＆＃13;

<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>

＆＃13;

Answer 3

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

如何扩展div以获取剩余宽度而不使用overflow：hidden方法？

5 个答案: