1

使用时如何制作如下display: inline-block; 

+----------+  heading text here
|  image   +  some paragraph text
+----------+

+----------+  heading text here
|  image   +  some paragraph text
+----------+

hmtl 我用过...

<div class="videos">
  <div><img src=""><h3>heading text here</h3><p>some paragraph text</p></div>
  <div><img src=""><h3>heading text here</h3><p>some paragraph text</p></div>
</div>

我用过的css...

.videos{
  display: inline-block; /* i have to use this as other elements to be inline-block */
}
.videos img{
  float: left;
}

我的问题的解决方案是“某些段落文本”不应低于图像。或者有什么方法可以得到吗？

编辑

演示为什么即使设置后第二个标题和文本也会向右移动text-align: left !imortant;

4

5 回答 5

1

与使用另一个浮点数相比，在浮点数旁边放置一列overflow: hidden内容的另一种方法是使用（列表示如果内容高于图像，则不会在此浮点数下显示）

工作小提琴：http: //jsfiddle.net/kUdBm/

于 2013-04-21T15:33:33.857 回答
0

您是否尝试过：

.video p h3{
  float : right;
 }

它应该工作。

于 2013-04-21T14:29:22.387 回答
0

您可以将您的h3and包装p在一个 div 中：

<div class="right">
    <h3>heading text here</h3><p>some paragraph text</p>
</div>

然后你只需要将该 div 浮动到图像的右侧

div.right {
    float: right;
}

小提琴

当浮动元素位于容器框内时会出现问题，该元素不会自动强制容器的高度调整为浮动元素。当一个元素浮动时，其父元素不再包含它，因为浮动已从流中移除。您可以使用 2 种方法来修复它，即clear: both添加：

<br style="clear:both" />

这是一个快速而肮脏的解决方案，但不鼓励使用，因为它有很多缺点。更优雅和正确的方法是使用clearfixwhich 是一种元素在其自身之后自动清除的技术，这样您就不需要添加额外的标记。它通常用于浮动布局，其中元素浮动以水平堆叠。

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: block;
}

clearfix你可以在互联网上找到很多关于的资源。这是基于您更新的问题的更新小提琴。

于 2013-04-21T14:30:25.430 回答
0

这是演示您的代码：

http://jsfiddle.net/bartekbielawa/cgWtH/

CSS 代码

.videos{
  display: inline-block; /
}

.videos div {
    clear: both;
    margin: 20px 0;
    min-height: 60px;
}


.videos img {
  float: left;
  width: 100px; 
  margin-right: 10px;  
}

.videos div h3, videos div p {
    float: left;
}

.videos div h3 {
    margin: 0;
    padding: 0;
}
于 2013-04-21T14:33:33.470 回答
-1

你必须在你使用的 H3 和 p 上加上宽度。否则，如果 h3 和 p 很大，它将在图像下方。

于 2013-04-21T14:25:41.563 回答