Question

我有这个HTML代码：

<span class="left">
        <img class="avatar" src="image.jpg" />
</span>
<span class="right">
    Lorem ipsum dolor sit amet, nunc euismod nisl nam euismod, quis maecenas blandit ac, neque sed ut pulvinar, lectus sagittis sapien mauris per risus vel. Ligula sapien sed morbi cras tellus commodo. Rutrum mattis accumsan, hac sed praesent, neque tortor neque, commodo mauris sagittis turpis, faucibus sed ultrices tempor interdum. Lobortis assumenda nisl, posuere cras sit risus egestas bibendum nec, magna in, sed mattis pharetra felis nulla vitae aptent, in semper et...
</span>

我希望这两个块位于同一条线上。我用这个CSS：

.right {
width: 250px;
background-color: orange;
float: left;
} 

.left {
width: 100px;
background-color: orange;
float: left;
}

这很好，但我希望右侧（文本）不是250px，而是100％。如果我将宽度：100％，则该块不在同一行。

我该怎么做？

Answer 1

以下是我的问题解决方案 - 您在左侧项目上设置宽度，在右侧项目上设置边距。左侧项目是浮动的，右侧项目不是。我还将右侧项目显示为“块”。

.right {
    display: block;
    margin-left: 100px;
    width: auto;
    background-color: orange;
} 

.left {
    width: 100px;
    background-color: orange;
    float: left;
}

Answer 2

对于浮动元素，如果要使用百分比宽度，则应计算每个元素的宽度：

.right {
width: 50%; /*or 45%*/
background-color: orange;
float: left;
} 

.left {
width: 50%; /*or 55%*/
background-color: orange;
float: left;
}

然后它们将显示在同一行。

此外，如果存在边距或填充，则在计算宽度时应考虑到这一点，就像将两者都设置为50％但是有10px的余量一样，它仍然会强制下一个元素进入新行。

要使.right元素计算宽度，您需要将其宽度设置为width: auto;并对.left元素进行反边距：margin-left; 100px;（其中100px相等）到.left elemtents宽度。）

Example for you here

Answer 3

删除右类和浮点数的宽度。这将使正确的类获得父元素的剩余宽度。

.right {
    background-color: orange;
}
.left {
    width:250px;
    background-color: orange;
    float:left;
}

示例http://jsbin.com/ayaha3

将两个块放在同一条线上

3 个答案: