Question

我在一个父div下有两个div，父div有100％宽度：

<div id="parent">
  <div class="left"></div>
  <div class="right"></div>
</div>

条件是：

我想在同一条线上有两个div。
正确的div可能存在也可能不存在。当它存在时，我希望它始终固定在右边。但是，左边的div必须是弹性的 - 它的宽度取决于它的内容。

我已经尝试了float：left和dispaly：inline-block但两种解决方案似乎都不起作用。

任何建议都将不胜感激。

Answer 1

如果你不关心IE7，我会去@ sandeep的display: table-cell回答。

否则，这是另一种选择，只有一个缺点：“正确”div必须首先出现在HTML中。

见： http://jsfiddle.net/thirtydot/qLTMf/
并且完全相同，但删除了“右侧div”：http://jsfiddle.net/thirtydot/qLTMf/1/

#parent {
    overflow: hidden;
    border: 1px solid red
}
.right {
    float: right;
    width: 100px;
    height: 100px;
    background: #888;
}
.left {
    overflow: hidden;
    height: 100px;
    background: #ccc
}
<div id="parent">
    <div class="right">right</div>
    <div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper porta sem, at ultrices ante interdum at. Donec condimentum euismod consequat. Ut viverra lorem pretium nisi malesuada a vehicula urna aliquet. Proin at ante nec neque commodo bibendum. Cras bibendum egestas lacus, nec ullamcorper augue varius eget.</div>
</div>

Answer 2

@Yijie;检查链接可能是您想要的http://jsfiddle.net/sandeep/NCkL4/7/

修改：

http://jsfiddle.net/sandeep/NCkL4/8/

或查看下面的SNIPPET

#parent{ overflow:hidden; background:yellow; position:relative; display:table; } .left{ display:table-cell; } .right{ background:red; width:50px; height:100%; display:table-cell; } body{ margin:0; padding:0; }

<div id="parent"> <div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> <div class="right">fixed</div> </div>

Answer 3

HTML：

<div id="parent">
  <div class="right"></div>
  <div class="left"></div>
</div>

（div.right需要在HTML标记中的div.left之前）

CSS：

.right {
float:right;
width:200px;
}

Answer 4

所以左边的div风格取决于是否存在正确的div。我想不出一个允许这种行为的CSS选择器。

因此，在我看来，您需要以编程方式在父div或左侧div上添加类服务器端（或JS）来执行此操作。

<div id="parent twocols">
  <div class="left"></div>
  <div class="right"></div>
</div>

或

<div id="parent">
  <div class="left"></div>
</div>

所以正确的风格总是：

.right {
    float: right;
    width: 200px; /* or whatever value you need */
    /* margin and padding at your discretion */
}

，左边的风格是：

.parent.twocols .left {
    margin-right: 200px; /* according to right div width + margin + padding*/
}

Answer 5

我使用white-space取得了成功：nowrap;在外容器上，显示：inline-block;在内部容器上，然后（在我的情况下，因为我希望第二个用于自动换行）white-space：normal;关于内在的。

Answer 6

我认为这是你想要的：

<html>
<head>
<style type="text/css">
#parent 
{width:100%;
height:100%;
border:1px solid red;
}
.left
{
float:left;
width:40%;
height:auto;
border:1px solid black;
}
.right
{
    float:left;

width:59%;
height:auto;
border:1px solid black;
}
</style>
</head>
<body>
<div id="parent">
  <div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div class="right">This is the right side content</div>
</div>
</body>
</html>

以下是演示：http://jsfiddle.net/anish/aFBmN/

两个div相同的线，一个动态宽度，一个固定

6 个答案: