图像对齐 - 浮动后间距不正确答案

【问题标题】：Alignment of images - Not spacing out correct after float图像对齐 - 浮动后间距不正确
【发布时间】：2017-11-25 08:19:03
【问题描述】：

在我的 wordpress 暂存环境中并排对齐图像时遇到一些问题。

我认为这将是开发阶段中最简单的部分，但实际上证明相当困难。

所以简而言之，我想将两个图像对齐在一起，中间有一些空间和它们下方的按钮。简单吧？

所以我做了以下 HTML：

<div class="shop-banners">
<ul>
<li>
<img src="https://www.cutepinkboutique.com/staging/wp-
content/uploads/2017/06/NoHTTPS1"> 
<input type="submit" name="submit" value="Shop our Tops and Dresses">
</li> 
<li>
<img src="https://www.cutepinkboutique.com/staging/wp-
content/uploads/2017/06/NoHTTPS2"> 
<input type="submit" name="submit" value="Shop Now for Boutique Clothing">
</li>
</ul>
</div>

这是我正在使用的 CSS：

.shop-banners ul {
display: inline-block;
float: left;
width: 40%;
margin-left: auto;
margin-right: auto; 
}

.shop-banners li {
display: inline-grid;
margin: 0 20px 0 0;
}

.shop-banners input {
margin-top: 20px;
}

上面的代码如下所示：

这一切都在我们的暂存环境中，所以我无法链接网页。我只是不明白为什么会这样。我试过弄乱宽度百分比并取出浮动但没有运气。

任何帮助将不胜感激。

【问题讨论】：

将每张图片包裹在<li> 中，并给它float。直接在<ul> 元素下放置图像是无效的 html
嗨，墨菲斯，感谢您的帮助。我将其包装如下： .shop-banners ul { display: inline-block;向左飘浮;宽度：40%；左边距：自动；边距右：自动； } .shop-banners li { display: inline-grid;边距：0 20px 0 0； } .shop-banners 输入 { margin-top: 20px; } 但图像仍然位于另一个下方。
这可能是因为您将 <ul> 限制为 40% 的宽度。如果您需要它那么小，请确保您的图片不超过 <ul> 本身。

标签： html css wordpress image

【解决方案1】：

这取决于图像的纵横比，如果你有两个不同纵横比的不同图像，如果你设置width相同，你会得到你想要的，但图像分辨率会改变，所以试着把图像换成block 元素集width 属性然后将image 分配给max-width:100%

【讨论】：

【解决方案2】：

请在两个部分都使用 Li。进入问题，它只显示一张图片使用下面的CSS

.shop-banners ul {
 display: inline-block;
 float: left;
 width: 40%
 margin-left: auto;
 margin-right: auto; 
}


li {
    display: inline-grid;
    margin: 0 20px 0 0;
}

input {
    margin-top: 20px;
}

<div class="shop-banners">
<ul>
<li>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfefpyGjtYN37nWjh0koST45Hjx9uA4TP0OKlUG81VBsKaWI7g"> 
<input type="submit" name="submit" value="Shop our Tops and Dresses"> 
</li>
<li>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfefpyGjtYN37nWjh0koST45Hjx9uA4TP0OKlUG81VBsKaWI7g"> 
<input type="submit" name="submit" value="Shop Now for Boutique Clothing">
</li>
</ul>
</div>

【讨论】：

感谢您的帮助。我尝试了上面建议的代码并执行了以下操作： .shop-banners ul { display: inline-block;向左飘浮;宽度：40%；左边距：自动；边距右：自动； } .shop-banners li { display: inline-grid;边距：0 20px 0 0； } .shop-banners 输入 { margin-top: 20px; } 但图像仍然位于彼此下方。我尝试修改宽度，但这没有任何区别。
请将 HTML 和 CSS 替换为我的答案中的 HTML 和 CSS
哇。它不会让我编辑您的答案，但我发现它低于彼此。多么奇怪？！
为什么要编辑我的答案，您可以复制并粘贴它
这是一个错误。

【解决方案3】：

所以对于你的代码，

你应该为图片使用width: 50%，这样它就占据了屏幕宽度的一半。
对于两个图像之间的间距，在包含的div 上使用padding。
要以上述方式排列按钮和图像，请在CSS 中使用flexbox。通过简单地将它们排列成行。见下文CSS-

我已经用height 和width responsive 演示了图片。

您可以通过简单地将图像的高度更改为绝对值来更改它。

.shop-banners {
    display: flex;
    flex-direction: row;
}
.shop-banners__left, .shop-banners__right {
    display: inline-block;
    width: 50%;
}
.shop-banners img {
    width: 100%;
    height: 100%;
}
.shop-banners input {
    width: 100%;
}
.shop-banners__left {
    padding-right: 10px;
}
.shop-banners__right {
    padding-left: 10px;
}

<div class="shop-banners">
    <div class="shop-banners__left">
	<img src="https://s-media-cache-ak0.pinimg.com/originals/ce/4d/0c/ce4d0c6e5769b1ae0e78a09a516bce6a.jpg"> 
	<input type="submit" name="submit" value="Shop our Tops and Dresses"> 
    </div>
    <div class="shop-banners__right">
	<img src="http://vivaglammagazine.com/wp-content/uploads/2017/05/636096742373357996142416222_fashion-beauty-tips.jpg"> 
	<input type="submit" name="submit" value="Shop Now for Boutique Clothing">
    </div>
</div>

【讨论】：

【解决方案4】：

我使用的代码基本上是正确的，但是最好将它包含在

中

。

主要区别在于缩小了 wordpress 媒体库中的实际图像大小。一旦我这样做并修改了 css 中的宽度百分比，它们就可以毫无问题地对齐。

【讨论】：