Question

我需要让我的文本和图像在同一行上彼此相邻，而不使用表格。浮动：左右不起作用。

<h1 id="profileHead">Connor Clarke - Lorem ipsum dolor sit amet.</h1>
  <div id="profile">
    <img id="profilePic" src="pictures/profilePicture.jpg">
      <p id="profileDesc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in justo libero. In dapibus vulputate augue at auctor. Aliquam sagittis odio quis magna ornare, at molestie neque mattis. Proin non orci ac arcu cursus tempus et ac purus. Nam aliquet.</p>
  </div>

#profilePic {  width: 300px;  height: 300px;  float: right;}

#profileDesc {float: left;}

Answer 1

您不必将图像放在段落中，也可以不用。

Here is a jsfiddle example

您的<p>占据宽度的100％，将您的#profileDesc宽度更改为50％。 <p>为100％正在强制它换行。

#profileDesc {float: left; width: 50%;}
#profilePic {  width: 300px;  height: 300px;  float: right;}

Answer 2

也许使用calc？

＆＃13;

* {
    padding: 0;
    margin: 0;
}
#profile{
    overflow: hidden;
}
#profilePic {
    width: 300px;
    height: 300px;
    float: right;
    margin-left: 20px;
}
#profileDesc {    
    width: calc(100% - 320px);
    float: left;
}

＆＃13;

<div class="b">
        <img id="profilePic" src="pictures/profilePicture.jpg"/>
         <p id="profileDesc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in justo libero. In dapibus vulputate augue at auctor. Aliquam sagittis odio quis magna ornare, at molestie neque mattis. Proin non orci ac arcu cursus tempus et ac purus. Nam aliquet.</p>
        <div style="clear: both"></div>
     </div>

＆＃13;

Answer 3

我想到解决这个问题的方法有几种。

如果布局太窄（如果50％小于300px就会中断），那么涉及更改#profileDesc宽度的解决方案将无法正常显示，因此我不建议使用。

divy3993的建议有效，但它不是我想到的解决方案，并不是在所有情况下都是最好的 - 这取决于你想做什么，你希望如何适应其余的你的页面。

你可以通过删除css中的一行来实现类似的效果：

#profileDesc {float: left;}

你会发现它显示在你想要的地方。

尝试添加一个新的p元素，你会看到不同的行为（在p外面浮动的img的解决方案中，后续的p将继续与图像一起包裹，在divy3993的解决方案中，会有一个间隙）

另一种解决方案，产生不同的行为，是使用一个包含div的位置：relative，允许你对图像使用绝对定位，然后在div的右侧添加填充，这样其中的内容就不会溢出到图像上。如果您希望文本或其他内容在一个永远不会比图像更宽的列中继续向下，这将非常有用，如果您希望将其他内容放在单独的列中，则非常有用。要做到这一点：

<h1 id="profileHead">Connor Clarke - Lorem ipsum dolor sit amet.</h1>
<div id="profile">
<div id="column">
<img id="profilePic" src="pictures/profilePicture.jpg">
<p id="profileDesc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in justo libero. In dapibus vulputate augue at auctor. Aliquam sagittis odio quis magna ornare, at molestie neque mattis. Proin non orci ac arcu cursus tempus et ac purus. Nam aliquet.</p>
</div>
</div>

<style>
#profilePic { position: absolute; right: 0px; top: 0px;  width: 300px; height: 300px;  float: right;}
#column {position: relative; padding-right: 310px;}
</style>

如何并排放置文本和图像？

3 个答案: