CSS，HTML，图像对齐

我有6个图像，需要调整它们为：CSS，HTML，图像对齐

Img1  Img2 

Img3  Img4 

Img5  Img6

我应该怎样？我无法做到这一点。

<Image src = "" style = "margin-top: -10em; margin-left: -50em; float: left; width: 450px;" /> 

<Image src = "" style = "margin-top: -10em; margin-left: -10em; float: left; width: 450px;" /> 

<Image src = "" style = "margin-left: -120em; margin-top: -50em; float: left; width: 450px;" /> 

<Image src = "" style = "margin-left: -120em; margin-top: -50em; float: left; width: 450px;" /> 

<Image src = "" style = "margin-left: -120em; margin-top: -50em; float: left; width: 450px;" /> 

<Image src = "" style = "margin-left: -120em; margin-top: -50em; float: left; width: 450px;" />

图像的大小相同。

来源

2011-02-28 gathan

-3

图像2，4后，和6

<风格> .clr { 明确：左; } < /风格>

< DIV CLASS = “CLR” > </DIV >

来源

2011-02-28 15:30:53 Duniyadnd

请不要鼓励内联风格 – corroded 2011-02-28 15:31:50

@corroded - 更新，只要最终用户知道他们不需要这样做，我不知道这是一个问题。 – Duniyadnd 2011-02-28 15:36:09

不管结局如何，我会认为我们作为开发者应该推动更多的前沿技术和思维。尽管找出解决问题最简单的方法总是一件好事，但有时最简单的解决方案并不是最干净或最合适的解决方案。 – corroded 2011-02-28 15:40:39

-2

简单地漂浮每个图像左，再经过每一秒的图像把下面<div style="clear: both;"></div>应该解决您的问题。

来源

2011-02-28 15:30:54

会upvote，但今天全部使用:)会更好，在.css文件中的外部类 – 2011-02-28 15:32:29

我认为不使用内联样式是相当常识......他是在一个快速演示后不是一个指导如何以改善您的标记结构。 – 2011-02-28 15:35:49

@ZeSimon你应该总是教最佳实践，如果你不认为你在做什么生产代码是可以的，以身作则（不是我的方式倒退了） – 2011-02-28 15:41:08

对不起，是肛门约，但

请请请不要使用内联样式。

和请为上帝的爱，don't use tables for non-tabular data！

把它们放在一个列表：

<ul> 
    <li><img 1></li> 
    <li><img 2></li> 
    <li><img 3></li> 
    <li><img 4></li> 
    <li><img 5></li> 
    <li><img 6></li> 
</ul>

风格他们在一个单独的样式表：

ul li { 
    float: left; 
    width: 49%; 
}

什么的。只要指定ul宽度，如果你不想让列表占据整个屏幕。

来源

2011-02-28 15:31:24 corroded

优秀的答案男人！ – 2011-02-28 15:39:55

裹<DIV> - 标签在他们身边，像这样：

<div style="width:yourimagewith x 2"> 
    <img src="1" /> 
    <img src="2" /> 
    <img src="3" /> 
    <img src="4" /> 
</div>

这种解决方案并不会给你所有的风格和花车等大惊小怪。另外，如果您添加新图像，则不必在每两张图像后都添加一个新的div标签，这对我来说似乎不利于维护。

来源

2011-02-28 15:33:00

该做的伎俩：

img { float:left; } 
img:nth-child(odd) { clear:left; }

现场演示：http://jsfiddle.net/simevidas/9k6ML/1/

注意，一些落后的浏览器（IE浏览器... KHM）不支持:nth-child(odd)。

来源

2011-02-28 15:42:02

CSS，HTML，图像对齐

回答

相关问题