内容显示问题

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

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

Answer 2

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

.left_service_wrap {
   float:left;
   width:50%;
}
.right_service_wrap {
    float: left;
    width:50%;
}

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

考虑到您要求将额外的左边距应用于左侧容器，因此您需要重新排列左侧和右侧容器的宽度。因此，对于 20% 的 left-margin，等式变为：整个父级宽度 (100%) 减去边距 (20%)，结果的一半 (40%)。

内容显示问题

Content displaying issues

html

css

position

inline