Question

我想知道格式化以下布局的最佳方法是什么：（整齐排列，间隔整齐）：

enter image description here

这是HTML：

<div class"wrapper">
  <img alt="Image 1" src="images/image1.png" />
  <div class="description">
    <h1>Heading 1</h1>
    <p>Paragraph 1</h1>
  </div>
</div>

我尝试了下面这个但是vertical-align属性似乎不起作用，因为我无法将h1的顶部与图像的顶部对齐：

img, div.description {
    float: left;
}

div.description { margin-left: 10px; vertical-align: top; }

h1 { background: blue;  }
p { background: red; }

如果不是如何在右下方显示右侧部分，我们希望右手边也可以垂直居中顶对齐？

这是JSFiddle链接：

http://jsfiddle.net/johngoche99/ZPKZj/1/

好的，为了在调整浏览器大小时保持文本不下降，有必要将包装元素的宽度指定为700px。然后就行了。

感谢。

Answer 1

在css中你需要这样做

img{
    float: left;
    height: 300px
}

div{
    float: left;
}

h1{
    padding: 10px;
    background-color: #584480;
    color: #fff;
    font-weight: normal;
    font-size: 25px;
    margin: 0 0 10px 10px;
}

p{
    padding: 10px;
    background-color: #E24480;
    color: #fff;
    font-weight: normal;
    font-size: 25px;
    margin: 0 0 10px 10px;
}

仅此而已......

希望这会对你有帮助......

Answer 2

我想你想要这样的东西：

JSFIDDLE

你想在这里使用css。您将向第一个div添加ID，例如<div id="wrapper">这是您的主要div。然后在第二个div中为标题添加<div id="headings">。然后在你的CSS中添加下面的代码。（注意：这不是有史以来最好的css代码。但它有效：））

HTML：

<div id="wrapper">
  <img alt="Image 1" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/green-iguana_563_600x450.jpg" />
  <div id="headings">
    <h1>Heading 1</h1>
    <p>Paragraph 1</h1>
  </div>
</div>

的CSS：

#wrapper{
width: 960px;
margin: 0 auto;
}

#wrapper img{
    float: left;\
    margin-right: 40px;
    padding-right: 40px;
}

#headings{
    position: relative;
    float: left;
}

h1{
    margin-top: -5px;
}

希望它有所帮助！

Answer 3

看起来你的标记需要稍微改变才能更多，正确; HTML：

    <div id="all">
    <div id="sidebar">
      <img class="side_image" alt="Image 1" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/green-iguana_563_600x450.jpg" />
    </div>
    <div id="main">
        <h1>Heading 1</h1>
        <p>Paragraph 1</h1>
  </div>
</div>

CSS：

#sidebar { float: left; }
#sidebar { margin-right: 40px; }
h1 {
    margin-bottom: 30px;
    margin-top: 0;
}

链接查看它将如何： http://jsfiddle.net/56Z7C/1/

Answer 4

这可以通过简单的CSS实现。

img, div{
    float: left;
    margin: 10px;
}

http://jsfiddle.net/ZPKZj/2/

IRL，请勿使用此CSS。它太通用了，无法在任何生产环境中使用。您可以为元素提供ID或类，以使规则更加具体。

Answer 5

垂直对齐仅适用于表格。如果您想使用div执行此操作，可以尝试使用display: table：

<div class="table">
  <div class="row">
    <div class="cell">
      <img alt="Image 1" width="100" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/green-iguana_563_600x450.jpg" />
    </div>
    <div class="cell" id="stuff">
      <h1>Heading 1</h1>
      <p>Paragraph 1</p>
    </div>
  </div>
</div>

CSS：

.table { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }
#stuff { vertical-align: middle; }

这样做的好处是不依赖于元素的大小/边距，但在IE7及以下版本中不受支持。就像生活中的所有事情一样，display: table是一种权衡。

CSS：格式化布局的最佳方式

5 个答案: