[英]CSS Div Element with Inline-Block doesn't work
When using two div elements and the inline-block the two div's do not stand beside one another. 当使用两个div元素和内联块时,两个div不能彼此相邻。
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/ http://jsfiddle.net/gqfmmdy9/1/
Thanks in advance. 提前致谢。
You are setting margin-right: 75%
, which is pushing the next element to the bottom. 您要设置
margin-right: 75%
,这会将下一个元素推到底部。 You'll have to remove it. 您必须将其删除。
#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>
#line {
display:inline-block;
margin-left:5%;
margin-right:75%;
border: 5px solid orange;
}
Your styles are working. 你的风格都在工作。
Try swapping margin-right:75%;
尝试交换
margin-right:75%;
for margin-right:2%;
margin-right:2%;
. 。
EDIT: Also, I suspect you need to give #line
an explicit width declaration. 编辑:另外,我怀疑您需要给
#line
一个明确的宽度声明。 Something like width:12%;
width:12%;
. 。
If you want both the div
s side by side, you can use <table>
tag. 如果您希望两个
div
并排放置,则可以使用<table>
标记。 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 和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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.