HTML Inline Flex 不适应主类

Question

这是我面临的问题。

我正在尝试在 content4 类下创建两个容器，以 imagesetter 作为类。 动机是将边距 25% 宽度从左侧移动。

现在它看起来图片工作正常。 但至于文字，我试过各种显示方式。第二个文本只是不想右对齐。

CSS:

#content4 {
    clear: both;
    overflow: auto;
}

.imghalf{
width:35%;
margin-left: 100px;

}

.imgsetter{
    padding-left:10%;
}

.t5 {
  font-family:actor;
  font-weight: bold;
  font-size:26px;
  margin-left:100px;
}

.t6 {
  display:inline-flex;
  font-family:actor;
  font-weight: bold;
  font-size:26px;
  margin-left:100px;
}

HTML:

<div id="content4" class="imgsetter">
<img class="imghalf" src="http://via.placeholder.com/450x300.png" />  
<img class="imghalf" src="http://via.placeholder.com/450x300.png" />

<p class="t5">This is how we do it at stackoverflow man</p>
<p class="t6">This is how we do it at stackoverflow man</p>
</div>  

代码笔:https://codepen.io/jayvicious/pen/LLYvEm

专业人士的建议， 我应该创建 4 个宽度为 25% 的容器并将其停放在 content4 下吗？ 这是为了解决响应问题。

Answer 1

好吧，我通过将方法更改为内联 block 来修复它:

HTML:

<div id="content4" class="imgsetter">
<img class="imghalf" src="Projects/Sojo/Documentation/Slice/01_Home/itenarythumb01.png" />  
<img class="imghalf" src="Projects/Sojo/Documentation/Slice/01_Home/itenarythumb02.png" />

<p class="t5 imghalf">5 Days 4 Nights Tokyo Free & Easy Travel!</p>
<p class="t5 imghalf">6 Days 5 Nights Nagano Nature Adventure </p>
</div>    

CSS 更改:

.t5 {
  display: inline-block;
  font-family:actor;
  font-weight: bold;
  font-size:26px;
  margin-left:25%;
  padding-left: 100px;
}

说明:我在

的基础上添加了两个类。所以它会继承被margin-left 25%

分割的容器