Divs拒绝对齐

Question

我是CSS / HTML的新手，但通常可以解决问题。虽然不是这个问题......我花了两天的时间试图修复它没有任何乐趣

使用WP 3.9.1和WooThemes Mystile附带自定义css进行更改;不需要儿童主题。当我使用左对齐将带有字幕的图像放在页面上时，有些人和其他人会大力拒绝。在较旧的WP中，它总是将所有图像对齐以创建行，但似乎不是3.9.1。我已经尝试了所有我能想到的东西，但那些应该左对齐的图像实际上是正确的。

使用Firebug或Safari Inspector，我试图将它们左对齐，即使使用负边距 - 左边也不会将图像放在它所属的位置。这几乎就像是某种分页符，因为缺少一个更好的术语，这使它成为正确的中心。就像它认为这个位置已经离开了。

我没有使用任何图库或插件，只是将图像添加到文本框中带有标题的页面，而不是视觉效果。我店里的大多数画廊都是乱七八糟的。 ：（

以下是一个例子：Tuscany Gallery我希望大多数画廊连续2个或3个垂直。有时使用奇数个图像我可能会将1到3个图像居中，但大多数图像会保持对齐。

任何帮助都将非常感谢！谢谢！

Re：Body css代码

我有一些颜色变化和更多div＃attachmet_number（不认为你需要它们），但这是关于它。

:active, :focus { 
outline-style: none !important; 
-moz-outline-style:none !important; 
}

a {
outline-style: none;
-moz-outline-style: none;
}

a:before {
outline: none !important;
}


a:imag { 
outline: 0px none; 
}

#sidebar .post-46 {
display: none !important;
}

article.post-46 img.alignleft {
margin: 0 1.618em 1em 16px;
} 

.post .alignleft, .type-page .alignleft {
margin-bottom: 50px;
}


.post-282 .wp-caption img, .type-page .wp-caption img {
margin: 0 0 0 0.4em;
}


div#attachment_283 {
margin-left: 42px;
}

div#attachment_286 {
margin-left: 42px;
}

div#attachment_291 {
margin-left: 42px;
}

我不太确定这是否是你需要的。 div＃attachment_number是一个框内的图像，其下方有标题（标题）。

带有标题的图片的HTML

[caption id =“attachment_516”align =“alignleft”width =“407”] Duomo di Pisa [/ caption]

Answer 1

根据您对上述问题的评论，您的第四张照片（ Autumn Drive ）专门被推到第二张照片的最边缘（ Duomo di Pisa ）。

您似乎已为HTML中的每个div添加了特定宽度。如果你要为每个div添加一个特定的，相等的高度，那么它们将对齐并允许下面的div向左浮动。

更好的理想可能是在CSS中为面向横向的div声明一个类，在那里定义统一的宽度和高度，并将该类分配给所有面向横向的div。这样，您可以在一个地方轻松更改宽度和高度，并且它将应用于分配了该类的所有div（并且可以将多个类分配给单个div;只需将它们用空格分隔，例如class="landscape framed dark"例如）。