Question

这令我头疼......

我正在尝试在左侧使用固定高度/宽度的图像，在右侧使用文本，当然也在同一行。整个容器的动态宽度为视口的90％，这意味着右侧的文本也将具有动态宽度（90％ - 图像宽度），因为左侧的图像是固定的。文本需要左对齐，因此“float：right”将不起作用。我已经尝试了无数浮动，对齐，表格单元等的组合，没有任何作用...我最接近的是它们在同一行，但是文本被强制对齐到右边。

我的意思是：http://i.imgur.com/QRDhLro.png

#container {
overflow:hidden;
position:relative;
width:90%;
min-width:800px;
margin-bottom:20px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
}
.leftimage {
width:600px;
height:100px;
}
.righttext {    
float:right;
}

...
...

<div id="container">

    <div class="righttext">lorem ipsum lorem ipsum <br> lorem ipsum lorem ipsum </div>

    <div class="leftimage"><img src="../pictures/test.png"></div>

</div>

Answer 1

移动

<div class="righttext">lorem ipsum lorem ipsum <br> lorem ipsum lorem ipsum </div>

之后

<div class="leftimage"><img src="../pictures/test.png"></div>

CSS：

.righttext{
    float: none;
    margin-left: 600px;
}

Answer 2

也许只是：

<img src="#" align="left">
<p>This is my paragraph to the right of my image</p>

这确实有效，如下所示：http://jsfiddle.net/tWqwh/

图像和文字在同一条线上？

2 个答案: