Question

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

    <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

执行此操作的最佳方法是使用表格。 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>

使用表格属性来使其看起来更合适。

Answer 2

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

#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; }

获取文本以正确格式化而不包装div列

2 个答案: