强制图像与文本列在同一行

Question

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

我已经尝试过 display:inline 和 floats，但都不起作用。这是我的代码：

.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

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

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

1. 使用浮点数：

   .leftcolumn
   {
       width: 250px;
       float:left;
   }
   
   .middlecolumn
   {
       width: 250px;
       float:left;
   }
   

   这将使两个 div 保留为块元素，允许它们像往常一样运行，设置两列的宽度并继续围绕它们流动，因为图像是内联元素，它也会继续流动.然而，这种方法所做的只是让容器只与图像元素一样高，因为浮动元素不会以相同的方式位于页面流中。

2. 使用显示：inline-block

   .leftcolumn
   {
       display: inline-block;
       width: 250px;
   }
   
   .middlecolumn
   {
       display: inline-block;
       width: 250px;
   }
   

   这会将 div 设置为内联块，允许您在它们上设置宽度，但将它们呈现为内联元素。这样做的好处是 .page 元素会自动获取 div 的高度。它确实如此，但是在 ie7 中会中断，因为它不能正确呈现 inline-block 元素。

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