我如何将一个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

使用flexbox。 显示父级div的flex，创建两个子级div，并将其flex属性设置为1。

.wrapper {
    display: flex;
}

.block {
    flex: 1;
}

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

Answer 2

最简单的方法是使用div和float：

* {
box-sizing: border-box;
}

.container {
max-width: 80%;
}

.one-half {
float: left;
width: 50%;
border: 1px dashed red;
}

.one-half img  {
width: 100%;
}

@media screen and (max-width: 600px) {
width: 100%;
}

<div class="container">
<div class="one-half">Some stuff here lorem ipsum and a half</div>
<div class="one-half"><img src="http://placehold.it/200x200"></div>
</div>

Answer 3

我认为使用表格最好地实现您想要的东西。

<div id = "content">
<table id ="AboutUs"><tr><td class="mytext"><h1>Lorem ipsum</h1> Lorem ipsum...</td></tr>
<tr><td class="mypic"><img src='...pic.jpg'></td></tr></table>
</div>

带有一些定义图片宽度的类，等等。 另外，通过将宽度，高度设置为100％，使表格适合包含的div

.mytext{
    width:70%;
}
.mypic{
width: 30%;
/*other formatting you want here*/
/*the red line between pic and text*/
border-left-style: solid;
border-left-color: red;
}
#aboutUs{
background-color:red;
height:100%;
width: 100%;
}