CSS Div Element with Inline-Block doesn't work
Question
When using two div elements and the inline-block the two div's do not stand beside one another.
This is the code. (I configured some of the paragraphs and images to work better. I made sure the result was the same first though.)
<head>
<style>
#line {
display:inline-block;
margin-left:5%;
margin-right:75%;
border: 5px solid orange;
}
#TEST {
width:100%;
}
#pTxt {
text-align:center;
}
#heading {
color: red;
}
</style>
</head>
<body>
<div id="line">
<div>
<img id="TEST" alt="PICTURE" src="test.png" />
<div id="pTxt">
<h3 id="heading">
HEADING
</h3>
<p>TEST</p>
<br/>
<p>TEST</p>
</div>
</div>
</div>
<div id="line">
<img alt="PICTURE" id="TEST" src="test.png" />
<div id="pTxt">
<h3 id="heading">
HEADING
</h3>
<p>TEST</p>
<br/>
<p>TEST</p>
</div>
</div>
</body>
http://jsfiddle.net/gqfmmdy9/1/
Thanks in advance.
3 answers
solution1
0 ACCPTED 2014-11-30 15:11:08
You are setting margin-right: 75% , which is pushing the next element to the bottom. You'll have to remove it.
Fiddle
#line {
display:inline-block;
margin-left:5%;
border: 5px solid orange;
}
#line { display: inline-block; margin-left: 5%; border: 5px solid orange; } #TEST { width: 100%; } #pTxt { text-align: center; } #heading { color: red; }
<div id="line"> <div> <img id="TEST" alt="PICTURE" src="test.png" /> <div id="pTxt"> <h3 id="heading"> HEADING </h3> <p> TEST </p> <br/> <p> TEST </p> </div> </div> </div> <div id="line"> <img alt="PICTURE" id="TEST" src="test.png" /> <div id="pTxt"> <h3 id="heading"> HEADING </h3> <p> TEST </p> <br/> <p> TEST </p> </div> </div>
solution2
0 2014-11-30 15:13:45
#line {
display:inline-block;
margin-left:5%;
margin-right:75%;
border: 5px solid orange;
}
Your styles are working.
Try swapping margin-right:75%; for margin-right:2%; .
EDIT: Also, I suspect you need to give #line an explicit width declaration. Something like width:12%; .
solution3
-1 2014-11-30 15:20:06
If you want both the div s side by side, you can use <table> tag. See if this works for you.
<table>
<tr><td><div class="line">
<div>
<img class="TEST" alt="PICTURE" src="test.png"/>
<div class="pTxt">
<h3 class="heading">
HEADING
</h3>
<p>
TEST
</p>
<br/>
<p>
TEST
</p>
</div>
</div>
</div></td>
<td><div class="line">
<img alt="PICTURE" class="TEST" src="test.png"/>
<div class="pTxt">
<h3 class="heading">
HEADING
</h3>
<p>
TEST
</p>
<br/>
<p>
TEST
</p>
</div>
</div></td></tr>
</table>
and CSS
.line {
display:inline-block;
margin-left:5%;
margin-right:75%;
border: 5px solid orange;
}
.TEST {
width:100%;
}
.pTxt {
text-align:center;
}
.heading {
color: red;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.