Question

我不确定我在这里做错了什么。我试图强制图像与几列文本位于同一行，但它会像图像一样向下移动：http://imgur.com/Hs43rXF。左图是我想要的样子，但是我得到了正确的图像。

我已经尝试过显示：内联和浮动，但都不起作用。这是我的代码：

.page {
margin-top:50px;
padding-left:50px;
padding-right:50px;
position:relative;
width:1000px;
height:450px;
}
.leftcolumn {
margin-top:50px;
margin-left:0px;
width: 250px;
}
.middlecolumn {
margin-left:300px;
margin-right:320px;
margin-top:50px;
float:left;
display:inline;
}
.verticalimage {
margin-right:0;
margin-top:0;
float:right;
display:inline;
vertical-align:middle;
}

<div class="page">
    <div class="leftcolumn">text <br> text <br> text</div>

    <div class="middlecolumn">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet lorem velit. Nullam et metus eget nunc egestas laoreet et quis ligula. Vivamus lobortis sodales pulvinar. Nunc malesuada pretium ornare. Aliquam ut erat at magna pellentesque elementum. Fusce facilisis lorem et tortor euismod bibendum.</div>

    <img class="rightverticalimage" src="picture1.png"/>

</div>

感谢。

Answer 1

我为你做了这个尝试。我把东西拿出来让你理解代码。您可以根据自己的喜好进行编辑。

CSS

.page {
margin:5%;
width:100%;
height:450px;
}


div {
width:25%;
margin-left:3%;
float:left;
background-color:red;}

我将BG设为红色，这样你就可以看到div开始和停止的位置

HTML

<div class="page">

    <div>text <br /> text <br /> text</div>

    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet lorem velit. Nullam 

et metus eget nunc egestas laoreet et quis ligula. Vivamus lobortis sodales pulvinar. Nunc 

malesuada pretium ornare. Aliquam ut erat at magna pellentesque elementum. Fusce facilisis lorem 

et tortor euismod bibendum.</div>

<div>
    <img class="rightverticalimage" src="picture1.png"/>
</div>

</div>

将IMG放入div中以帮助更好地控制它。

我也会将FIREBUG下载到Firefox上，因为它有助于解决这些问题。

Answer 2

你在这里混合了几种不同的方法。首先，您可能已经注意到左栏，如果您进行div显示：内联它将不会保持其宽度。这是因为为了使用宽度或边距进行渲染，元素必须是块级别（默认情况下为div）。此外，在中间柱上设置左边距并且左侧div已经存在，其左侧将在容器内设置为550px（左列为250，左边距为300），边距和宽度是累积的。

那么有两种方法可以做到这一点（为了简洁，我省略了额外的利润）：

使用浮点数：
```
.leftcolumn
{
    width: 250px;
    float:left;
}

.middlecolumn
{
    width: 250px;
    float:left;
}
```
这将使两个div作为块元素，允许它们像往常一样运行，在两列上设置宽度并继续围绕它们的流动，因为图像是内联元素，它将继续流动。然而，这种方法的作用是使容器仅与图像元素一样高，因为浮动元素不会以相同的方式位于页面流中。
使用display：inline-block
```
.leftcolumn
{
    display: inline-block;
    width: 250px;
}

.middlecolumn
{
    display: inline-block;
    width: 250px;
}
```
这会将div设置为inline-block，允许您在它们上设置宽度，但将它们渲染为内联元素。这样做的好处是.page元素将自动获得div的高度。但它确实在ie7中断，因为它不能正确地呈现内联块元素。

我故意将宽度添加到图像元素上，因为它在两种方法中都是相同的（只需设置display：block并浮动它，或设置display：inline-block）

强制图像与文本列位于同一行

2 个答案: