css - 使文本正确格式化并且不包含在 div 列中

Question

我只能找到如何执行我的文本当前正在执行的操作。不阻止它。我希望文字不要包裹在图像下。但是我不能使用固定宽度。调整页面大小时，文本需要在同一列中继续。

http://jsfiddle.net/avHcA/

    <div id="apDiv1">
    <div id="apDiv2">
    <strong>image goes here</strong>
    </div>
    <div id="apDiv3" ><p><strong>Name Goes here in div with main text</strong></p>
    <p>text that I want to stay in its it div and not wrap underneath the 
    image goes here</p></div></div>

Answer 1

如果您使用百分比宽度，如下所示：

#apDiv2 {
    float: left;
    padding-right: 2%;
    width: 38%;
    z-index: 2;
}


#apDiv3 {
    float: left;
    width: 60%;
    z-index: 3;
}

然后文本将继续在同一列中，即使调整窗口大小也是如此。请务必在每个#apDiv1 之后清除浮动。要清除浮动，请添加类似于<div class="clear"></div>clear 类的 css 的内容，如下所示：

.clear { clear: both; }

Answer 2

最好的方法是使用一张桌子。http://jsfiddle.net/YymYF/

我刚刚将 div 复制到他们自己的表格单元格中

<table>
    <tr>
    <td>
        <strong><a href="http://climatemaryland.org/wp-content/uploads/2013/01/Casciani_Cheryl.jpg"><img class="alignleft  wp-image-131" style="border: 0px none;" alt="" src="http://climatemaryland.org/wp-content/uploads/2013/01/Casciani_Cheryl.jpg" width="166" /></a></strong>
    </td>
    <td>
        <p><strong>Cheryl Casciani</strong></p>
        <p>Cheryl Casciani is the Director of Neighborhood Sustainability for the
        Baltimore Community Foundation (BCF) where she is responsible for management
        of a range of initiatives aimed at strengthening Baltimore neighborhoods
        and making Baltimore a more sustainable city. Cheryl also serves as the
        Chair of the Baltimore Commission on Sustainability, which was created
        in 2008 and charged with developing and monitoring the implementation of
        Baltimore's Sustainability Plan. She has a Master's in Public and Private
        Management from the Yale School of Management and a Bachelors of Science
        in Economics and Bachelors of Applied Science from the University of Pennsylvania.</p>
    </td>
    </tr>

使用表格属性使其看起来更可取。