1

我想知道格式化以下布局的最佳方法是什么：（所有内容对齐且间隔整齐）：

在此处输入图像描述

这是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>

我尝试了以下方法，但垂直对齐属性似乎不起作用，因为我无法将 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 之类的东西。然后它工作。

谢谢。

4

5 回答 5

2

在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;
}

仅此而已...

希望对你有帮助 ...

于 2013-06-21T14:11:06.300 回答
1

看起来你的标记需要一点改变才能更多，khm 对；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/

于 2013-06-21T14:07:24.617 回答
1

垂直对齐仅适用于表格。如果你想用divs 做到这一点，你可以尝试使用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是一种权衡。

于 2013-06-21T14:17:07.873 回答
1

我想你想要这样的东西：

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;
}

希望能帮助到你！

于 2013-06-21T13:57:58.103 回答
1

这可以通过简单的 CSS 来完成。

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

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

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

于 2013-06-21T13:55:54.637 回答