[英]Float left and right not working
http://jsfiddle.net/S2fe9/容器应彼此相邻,但在换行符后才出现
<div data-role="page" id="pageone">
<div data-role="header" data-theme="b" data-position="fixed">
<h2>Audi A8</h2>
</div>
<div id="paintarea">
<div id="painttext" class="pt">
<h3>
<b>Paint</b>
</h3>
<p>We believe that every part of your car should have a personal
touch. Which is why you can choose from a wide range of paint
colours and finishes, from standard shades to metallic and pearl
effects.</p>
</div>
<div id="paintcolor" class="pc">
<b>Paint</b>
</h3>
<p>We believe that every part of your car should have a personal
touch. Which is why you can choose from a wide range of paint
colours and finishes, from standard shades to metallic and pearl
effects.</p>
</div>
</div>
</div>
尝试更新以下CSS:
#painttext {
width: 20%;
padding-top: 85px;
padding-right: 50px;
padding-left: 50px;
text-align: justify;
text-justify: interword; }
实际上宽度被错误地应用并且与其他div重叠
在这里检查更新的小提琴
padding-right
和padding-left
为您的容器增加了额外的宽度,请尝试在应用之前进行计算。 请尝试以下代码:现在总宽度为100%,如果超过100%,它将转到下一行。
CSS :
#paintarea
{
width: 100%;
height: 100%;
}
#painttext {
width: 30%;
padding-right: 10%;
padding-left: 10%;
text-align: justify;
text-justify: interword;
}
#paintcolor
{
width: 50%;
}
.pt
{
float: left;
}
.pc
{
float: left;
}
更新的小提琴 : 这里
尝试这个 :
HTML:
<div data-role="page" id="pageone">
<div data-role="header" data-theme="b" data-position="fixed">
<h2>Audi A8</h2>
</div>
<div id="paintarea">
<div id="painttext" class="pt">
<h3> <b>Paint</b></h3>
<p>We believe that every part of your car should have a personal touch. Which is
why you can choose from a wide range of paint colours and finishes, from
standard shades to metallic and pearl effects.</p>
</div>
<div id="paintcolor" class="pc">
<h3><b>Paint</b></h3>
<p>We believe that every part of your car should have a personal touch. Which is
why you can choose from a wide range of paint colours and finishes, from
standard shades to metallic and pearl effects.</p>
</div>
</div>
</div>
CSS:
#paintarea {
width: 100%;
height: 100%;
}
#painttext {
width: 20%;
padding-top: 85px;
padding-right: 50px;
padding-left: 50px;
text-align: justify;
text-justify: interword;
}
#paintcolor {
width: 55%;
}
.pt {
float: left;
}
.pc {
float: right;
}
尝试这个:
的CSS
#paintarea
{
width: 100%;
height: 100%;
}
#painttext {
width: 30%;
padding-right: 10%;
padding-left: 10%;
text-align: justify;
text-justify: interword;
}
#paintcolor
{
width: 50%;
}
.pt
{
float: left;
}
.pc
{
float: left;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.