如何使用CSS对齐div div的行中它们之间的所有项目（图像，标题，文本，按钮）？

时间：2018-07-17 15:04:42

标签： css3 flexbox visual-composer

我知道这个主题已经有了答案here，但是我的情况有所不同。

很遗憾，您必须知道我无法编辑HTML，因为我使用Visual Composer for WordPress生成了自己的HTML。我只能通过WordPress后台中的Visual Composer在HTML标签上添加类或ID。编辑每个Visual Composer块的HTML（使用WordPress文本模式）将花费很长时间。因此，我必须找到另一种有效的方法。

因此，为了对齐它们之间的所有项目，我尝试了许多解决方案：

我首先尝试在设置为相对位置的父div上使用最小高度，然后将按钮置于绝对位置，底部为0。 它适用于按钮对齐，但是我希望它能够自动进行自动管理，以防出现更多文本内容，并且我不想在几种响应模式下将最小高度更改为几倍。

因此，我尝试了link I shared above的FlexBox解决方案。 当我们只有图像，文本和按钮时，此解决方案有效， 但就我而言，我在每个图像和文本内容之间都有一个标题，因此这意味着我们可以在1行或2行或更多行上有一个标题...问题是它们本身与标题之间的标题未对齐“ Lorem Ipsum”文本也是如此。

我该如何管理？

谢谢您的帮助。

我提供了代码片段以查看我的问题：

.sameblockheight, .wpb_wrapper {
  display: flex;
  flex-direction: column;
}

.vc_column-inner {
  flex-grow: 1;
  display: flex;
}

.wpb_wrapper {
  flex-grow: 1;
  justify-content: space-between;
}

.subrow {
  display: flex;
}

.subrow > div {
  width: 200px;
}

.vc_column-inner {
  padding: 6% 8%;
}

.button-blue {
  text-align: center;
}

.alignnone {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
<div class="subrow">

 <div class="sameblockheight grid-col-3">
	 <div class="vc_column-inner vc_custom_1530896965169">
			<div class="wpb_wrapper">
				<p>
					<img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
				</p>
				<h5 style="text-align: center;">Title on 1 line</h5>
				<p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur beatae officiis ea, corporis eos quas temporibus asperiores iste impedit laborum et non, itaque eaque dignissimos. Distinctio, quaerat vel consectetur! Pariatur.</p>
				<a class="button-blue" href="#">Learn more</a>
			</div>
		</div>
	</div>

	<div class="sameblockheight grid-col-3">
		<div class="vc_column-inner ">
			<div class="wpb_wrapper">
				<p>
					<img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
				</p>
				<h5 style="text-align: center;">Title on 2 lines ...............................</h5>
				<p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque quas in quod quae magni eligendi dicta totam, placeat eveniet facere cupiditate natus aut, impedit incidunt error veritatis libero suscipit nisi.</p>
				<a class="button-blue" href="#">Learn more</a>
			</div>
		</div>
	</div>

	<div class="sameblockheight grid-col-3">
		<div class="vc_column-inner vc_custom_1530896977260">
			<div class="wpb_wrapper">
				<p>
					<img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
				</p>
				<h5 style="text-align: center;">Title on 3 lines ................ ................. ......................... ............... ...........</h5>
				<p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In ullam optio quia nam aliquam numquam ipsa incidunt possimus consequatur sed animi hic facere mollitia facilis libero cupiditate eaque, molestiae voluptas!</p>
				<a class="button-blue" href="https://staging.unify.com/en/solutions/voice-platforms/preconfigured-unified-communications">Learn more</a>
			</div>
		</div>
	</div>

	<div class="sameblockheight grid-col-3">
		<div class="vc_column-inner vc_custom_1530896983086">
			<div class="wpb_wrapper">
				<p>
					<img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
				</p>
				<h5 style="text-align: center;">Title</h5>
				<p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui provident eum voluptas veritatis ducimus iste enim recusandae aliquid sequi ad sapiente dolore similique nihil eos placeat, consectetur odit beatae voluptatum?</p>
				<a class="button-blue" href="#">Learn more</a>
			</div>
		</div>
	</div>

</div>

1 个答案:

答案 0 :(得分：0)

我只能用CSS想到的唯一解决方案是在标题min-height中添加h5。例如，我添加了min-height:40px，现在，所有h5的高度都相等。您可以设置更大或更小的一个。

缩小尺寸是，如果标题比您设置的min-height大，则会再次遇到该问题。

一个完全验证的解决方案是添加一些javascript / jQuery，以使h5的高度相等，而无需设置“硬编码” min-height。

如果您想/可以使用javaScript / jQuery，请告诉我，我将为您提供解决方案。如果没有，并且您只想使用CSS，则以下解决方案是我能想到的唯一解决方案。

h5 {
 min-height:40px;
 margin-top:0;
}


.sameblockheight, .wpb_wrapper {
  display: flex;
  flex-direction: column;
}

.vc_column-inner {
  flex-grow: 1;
  display: flex;
}

.wpb_wrapper {
  flex-grow: 1;
  justify-content: space-between;
}

.subrow {
  display: flex;
}

.subrow > div {
  width: 200px;
}

.vc_column-inner {
  padding: 6% 8%;
}

.button-blue {
  text-align: center;
}

.alignnone {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
<div class="subrow">

 <div class="sameblockheight grid-col-3">
	 <div class="vc_column-inner vc_custom_1530896965169">
			<div class="wpb_wrapper">
				<p>
					<img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
				</p>
				<h5 style="text-align: center;">Title on 1 line</h5>
				<p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur beatae officiis ea, corporis eos quas temporibus asperiores iste impedit laborum et non, itaque eaque dignissimos. Distinctio, quaerat vel consectetur! Pariatur.</p>
				<a class="button-blue" href="#">Learn more</a>
			</div>
		</div>
	</div>

	<div class="sameblockheight grid-col-3">
		<div class="vc_column-inner ">
			<div class="wpb_wrapper">
				<p>
					<img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
				</p>
				<h5 style="text-align: center;">Title on 2 lines ...............................</h5>
				<p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque quas in quod quae magni eligendi dicta totam, placeat eveniet facere cupiditate natus aut, impedit incidunt error veritatis libero suscipit nisi.</p>
				<a class="button-blue" href="#">Learn more</a>
			</div>
		</div>
	</div>

	<div class="sameblockheight grid-col-3">
		<div class="vc_column-inner vc_custom_1530896977260">
			<div class="wpb_wrapper">
				<p>
					<img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
				</p>
				<h5 style="text-align: center;">Title on 3 lines ................ ................. ......................... ............... ...........</h5>
				<p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In ullam optio quia nam aliquam numquam ipsa incidunt possimus consequatur sed animi hic facere mollitia facilis libero cupiditate eaque, molestiae voluptas!</p>
				<a class="button-blue" href="https://staging.unify.com/en/solutions/voice-platforms/preconfigured-unified-communications">Learn more</a>
			</div>
		</div>
	</div>

	<div class="sameblockheight grid-col-3">
		<div class="vc_column-inner vc_custom_1530896983086">
			<div class="wpb_wrapper">
				<p>
					<img class="alignnone" src=http://a1.mzstatic.com/us/r30/Purple/v4/47/1b/54/471b54ad-a6cf-f61e-2f33-11ffc6bd8215/icon100x100.jpeg>
				</p>
				<h5 style="text-align: center;">Title</h5>
				<p class="p-height" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui provident eum voluptas veritatis ducimus iste enim recusandae aliquid sequi ad sapiente dolore similique nihil eos placeat, consectetur odit beatae voluptatum?</p>
				<a class="button-blue" href="#">Learn more</a>
			</div>
		</div>
	</div>

</div>

相关问题
最新问题