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

我想知道最好的方法是什么格式如下布局：（与eveything排列整齐的间隔）：CSS：以格式布局的最佳方式

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/

OK，保持掉落下来的时候，浏览器大小，必须指定包装元素的宽度像700像素下面的文字。然后它工作。

谢谢。

来源

2013-06-21 Jason Posit

尝试学习CSS，发布你的问题，而不是你的任务 –

除非一个元素具有'display：table-cell;'**和**'display：table;''在其父母身上。你有一些研究和实验要做，这个问题与可关闭的IMO接壤。 – Dom

@ DominicB-c更正：vertical-align仅适用于table-cell或* inline *元素。不同之处在于，当用于表格元素时，它决定了它的孩子是如何垂直对齐的。在内联元素上，它规定了它们相对于周围内联元素的垂直对齐方式。 – cimmanon

在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-21 14:11:06 MujtabaFR

谢谢，你已经做了很好的设置方形彩色背景，并让它们正确对齐。然而清楚：两者;看起来似乎没有必要。 –

那是正确的，没有必要“明确：两者”，但我忘了清除它，谢谢 – MujtabaFR

这可以用简单的CSS来完成。

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

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

IRL，不要使用这个CSS。这太笼统了，无法在任何生产环境中使用。你可能会给你的元素ID或类来允许规则更具体。

来源

2013-06-21 13:55:54 Joe

我想你想是这样的：

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-21 13:57:58

你的CSS不适合我。我如何将H1的顶部与img的顶部对齐？ –

看到我的编辑，只是给h1标签添加一个负边距:) –

谢谢。看起来像更多的黑客，但。如果我更改h1标题的字体属性，将会中断。 –

它看起来你标记需要一点改变是更多，肯姆是正确的; 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-21 14:07:24

好吧，所以添加额外的div来嵌套图像为你做了工作。谢谢，但你能解释为什么这是必要的一些理论？另外，这并没有回答第二个问题，即如何垂直对齐文本而不是顶部对齐（在问题的第二部分）。谢谢。 –

当我调整浏览器的大小时，正确的div会下降。 –

你的第一部分评论：现在并不是那么必要，但它会更灵活，如果你将这个img包装到div中，例如：现在一切正常，但将来你会需要做一点改变 - 你只想让文字只出现在图像的右侧 - 无论你在那里输入多少个字符都无关紧要。看看这里 - http://jsfiddle.net/56Z7C/2/多数民众赞成在你的标记（和我的标记太）会发生什么，**但是**它只需要为我的标记写一个小jQuery脚本来使文本只出现在右侧，而不是在图像下。请看这里：http：//jsfiddle.net/56Z7C/3/ –

垂直对齐只适用于表。如果你想做到这一点与div S，你可以尝试使用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-21 14:17:07 SlightlyCuban

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

回答

相关问题