Question

在this page上，我有：

<div class="featured-image">
  <img width="150" height="150" src="http://walks.doig.com.au/files/2014/04/london-attractions-150x150.jpg" />
</div>
<div class="walk-text">
  <h2><a href="http://walks.doig.com.au/london/london-2-from-the-british-museum-to-the-london-eye/">London #2 from the British Museum to the London Eye</a></h2>
  <div class="entry-summary">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non leo dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas sagittis dolor eget faucibus. Aenean vestibulum sagittis purus eu venenatis. Fusce odio ligula, volutpat sed orci eget, interdum bibendum elit. Donec tempor vitae lorem sed eleifend. Donec rhoncus velit at ullamcorper egestas. Vestibulum [&hellip;]</p>
  </div>
  <!-- .entry-summary --> 
</div>

和

.featured-image {
  float: left;
  margin-right: 14px;
  margin-right: 1rem;
}
.walk-text {
  float: right;
}

为什么div.walk文本与div.featured-image在同一水平线上显示？

感谢。

Answer 1

你尝试设置一些宽度吗？

此代码示例可以为您提供帮助

.walk-text {
  float: right;
  width: 70%;
}
.featured-image {
  width: 27%;
  float: left;
  margin-right: 14px;
  margin-right: 1rem;
 }

Answer 2

.walk-text h2 p{
    float:right;
}

我认为此链接很有帮助： demojsfiddle

Answer 3

您可以通过为.walk-text添加宽度来修复它：

.walk-text {
    float: right;
    width: 460px;
}

Answer 4

从feature-image类中删除float：left。而是添加以下

img
{
    float:left;
}

.featured-image {
 margin-right: 14px;
 margin-right: 1rem;
 }

CSS浮动：对不起作用

4 个答案: