Question

我遇到了将两个不同元素水平对齐的问题。我希望第二个网格right_service_wrap显示在页面的右侧，就像left_service_wrap一样。我不确定我的错误是浮动权出现在left_service_wrap下面。

任何人有任何想法吗？

.left_service_wrap {

}
.right_service_wrap {
	float: right;
	display: inline;
}
.title_left {
	margin-left: 20%;
}
.title_right {
	
}
.service_wrapper {
	border: 1px solid black;
	margin: 15px;
	width: 20%;
}
.service_list {
	margin-left: 20%;
}

<div class="left_service_wrap">
	<div class="title_left">A LIST OF OUR SERVICES</div>
	<div class="service_list">
		<div class="service_wrapper">
			<div class="service_title">Flooring</div>
			<div class="service_description">The best floors!</div>
		</div>
		<div class="service_wrapper">
			<div class="service_title">Roofing</div>
			<div class="service_description">Your roof will be perfect!</div>
		</div>
		<div class="service_wrapper">
			<div class="service_title">Siding</div>
			<div class="service_description">mmmm siding.</div>
		</div>
		<div class="service_wrapper">
			<div class="service_title">Paint</div>
			<div class="service_description">Fabulous paint!</div>
		</div>
		<div class="service_wrapper">
			<div class="service_title">Kitchen Remodels</div>
			<div class="service_description">Pretty kitchen.</div>
		</div>
	</div>
</div>	
<div class="right_service_wrap">
	<div class="title_right">A LIST OF OUR SERVICES</div>
</div>

Answer 1

我不确定我是否完全理解您的问题，但如果这是我的想法，您必须将float: left添加到.left_service_wrap类规则中。（并为其定义一个宽度，允许其中的元素按需显示）

Answer 2

将两者的宽度设置为50％并执行：

left-margin

此处的演示演示：https://jsfiddle.net/usrce45v/

考虑到要求对左侧容器应用额外左边距要求您重新排列左侧和右侧容器的宽度。因此，对于\Concrete\Core\File\FileList的20％，等式变为：整个父母宽度（100％）减去边际（20％），结果一半（40％）。

内容显示问题

2 个答案: