html - 我如何将一个 div 一分为二，以便在左侧显示文本，在右侧显示图像

Question

我想将我的 div“划分”为两部分，以便在左侧显示文本，在右侧显示图像。关于主题中提到的 div 具有橙色背景色和红色线条。这只是为了向您展示它应该是什么样子。

HTML

#header {
  height: 100px;
  background-color: white;
}

.headerLinksClass {
  float: right;
  text-align: center;
  vertical-align: middle;
  line-height: 70px;
  padding: 15px;
  font-size: 20px;
}

#content {
  height: 300px;
  background-color: orange;
  font-size: 20px;
}

#aboutUs {
  background-color: red;
  height: 300px;
}

body {
  background-color: gray;
}

<div id="header">
  <div class="headerLinksClass">Lorem Ipsum</div>
  <div class="headerLinksClass">Lorem Ipsum</div>
  <div class="headerLinksClass">Lorem Ipsum</div>
  <div class="headerLinksClass">Lorem Ipsum</div>
  <div class="headerLinksClass">Lorem Ipsum</div>
  <div style="clear:both;"></div>
</div>

<div id="content">
  <div id="AboutUs">
    <h1>Lorem ipsum</h1> Lorem ipsum...</div>
</div>

Answer 1

使用 flex 盒子。为父 div 显示 flex，创建两个子 div，每个子 div 的 flex 属性都设置为 1。

.wrapper {
    display: flex;
}

.block {
    flex: 1;
}

<div class=“wrapper>
    <div class=“block”>text</div>
    <div class=“block”>img</div>
</div>