Question

我试图实现某些事情like thi但是由于某种原因，浮动权利似乎并不适用于我的情况（图片位于文本区域下方，而不是旁边）。见JSFiddle http://jsfiddle.net/YJ2p9/ 怎么了？感谢

<div class="element element-2"> 

  <h4>Overview</h4>
                    <div class="post-content"><p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer</p> <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer</p> <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer</p></div><div class="post-thumb"><img src="http://lorempixel.com/output/abstract-q-c-250-200-1.jpg" width="300" height="250">
                </div>

</div>

CSS

.element {

  clear: both;
  width: 100%;
}

.element-2 {
  background-color: #F5F5F5;
  width: 90%;
  margin: auto;
}


.post-thumb {
    float: right;
}
.post-thumb img {
    display: block
}
.post-content {
    margin-left: 10px;
}

Answer 1

如果您希望左侧的图像与您的示例相同：http://jsfiddle.net/YJ2p9/7/

.element {
    background-color: #F5F5F5;
    width: 100%;
}    

.post-thumb {
    float: left
    width: 100%;
    margin-right: -calc(100% - 300px);
}
.post-content {
    float: right;
    width: calc(100% - 300px);
    margin-top: -20px;
}

Answer 2

更改HTML

<div class="element element-2"> 

  <h4>Overview</h4>
                    <div class="post-content"><p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer</p> <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer</p> <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer</p></div><div class="post-thumb"><img src="http://lorempixel.com/output/abstract-q-c-250-200-1.jpg" width="300" height="250">
                </div>

    <div class="element"></div>
</div>

和css

.element {

  clear: both;
  width: 100%;
}

.element-2 {
  background-color: #F5F5F5;
  width: 90%;
  margin: auto;
}


.post-thumb {
    float: right;
}
.post-thumb img {
    display: block
}
.post-content {
   margin-left: 10px;
width: 300px;
float: left;
}

无需将图片div（后拇指）放入内容后＃＆lt;

Answer 3

此处可以看到更正后的代码：http://jsfiddle.net/bd7Jy/3/

图片想要在'post-content' div内。

问题是将图像浮动到右侧

3 个答案: