我如何将一个div分为两个，用于在左侧显示文本，在右侧显示图像

Question

i want to "divide" my div on two, for displaying text on the left side, and image on right. The div that is mentioned in topic about has an orange background color, and red line. It's just for show you, how it should look like.

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

Use flexbox. Display flex for the parent div, create two children divs each of them with the flex property set to 1.

.wrapper {
    display: flex;
}

.block {
    flex: 1;
}

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

Answer 2

Simplest way is to use divs and floats:

 * { 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

I think what you are wanting is best accomplished using a table.

<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>

with some class to define the pictures width, etc. Also, make the table fit the containing div by setting width, height to 100%

.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%;
}