Question

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>

Answer 1

尝试在CSS下面更新：

#painttext {
    width: 20%;
    padding-top: 85px;
    padding-right: 50px;
    padding-left: 50px;
    text-align: justify;
    text-justify: interword; }

实际上宽度被错误地应用并且与其他div重叠

检查更新的小提琴here

Answer 2

padding-right＆amp; 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;
}

更新小提琴： Here

Answer 3

试试这个：

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

Answer 4

试试这个：

<强> 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;
}

左右浮动不起作用

4 个答案: