两个div在同一行，一个宽度动态变化，一个宽度固定。

Question

两个div在同一行，一个宽度动态变化，一个宽度固定。

36

在一个父 div 下有两个子 div，父 div 的宽度为 100%：

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

要求如下：

我想要两个 div 元素在同一行显示。
右侧的 div 元素可能存在，也可能不存在。当它存在时，我希望它始终固定在右侧。但是，左侧的 div 元素必须是弹性的 - 它的宽度取决于其内容。

我已经尝试了 float:left 和 display:inline-block 两种方案，但都没有奏效。

希望得到任何建议。

- bingjie2680

6个回答

15

@Yijie；请查看链接，也许这是你想要的：http://jsfiddle.net/sandeep/NCkL4/7/

编辑： http://jsfiddle.net/sandeep/NCkL4/8/ 或者查看以下片段。

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

- sandeep

那不是海报想要的。如果您移除右侧的div，将会留下空白的空间，因为您使用了padding来保持内容之间的距离。 - DarthJDG

1

@darthJDG和Yijie Li，请查看我的新jsfiddle，也许那正是你想要的。 - sandeep

1

display: table-cell 是在此处获得所需效果的好方法，但您应该知道它在IE7中不起作用。这个事实可能重要，也可能不重要。 - thirtydot

+1 很好，不过你可能需要在不同的浏览器中测试它。你介意把实际的代码放在你的回答中而不仅仅是一个链接吗？ - DarthJDG

是的，请始终将代码副本放在答案中，以防链接失效或 jsfiddle 不可用等情况。 - Doug S

4

HTML:

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

需要在HTML标记中的

之前放置

CSS：

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

- a-second-mix

2

这是一个有趣的想法，但它不起作用。当左侧div占据整行时，它会在右侧div下面。 - bingjie2680

0

左侧div的样式取决于右侧div的存在。我还没有想到一种CSS选择器可以实现这种行为。

因此，我认为您需要在服务器端（或JS中）对父div或左侧div进行编程添加类。

<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*/
}

- Guillaume Esquevin

当您使用.left{margin-right:200px}如果右侧div不存在，它会留下一个空白的空间。不是吗？ - bingjie2680

我没有使用.left{margin-right:200px}，而是使用.parent.twocols .left{margin-right:200px}，只有在右侧列存在时才包括此边距，如.twocols附加类所示。 - Guillaume Esquevin

0

在编程方面，我曾成功地使用了外部容器的 white-space: nowrap;，内部容器的 display: inline-block;，然后（在我的情况下，因为我想要第二个容器自动换行）内部容器的 white-space: normal;。

- Tor Iver Wilhelmsen

-1

我认为这就是你想要的：

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

- Anish

那不是海报想要的。右侧不是固定大小，如果您删除右侧div，则会留下空白空间。 - DarthJDG

谢谢，但是对于三个答案来说问题还是一样的，当你移除右侧div时，它会留下空白的空间...我想我会使用脚本来解决。 - bingjie2680

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- thirtydot · Accepted Answer

如果您不关心IE7，我会选择@sandeep的"display: table-cell"答案。

否则，这里有一个替代方案，有一个缺点：在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>