Question

我有以下代码：

#pageMainContent {
    margin-top: 20px;
    margin-left: 40px;
    width: 800px;
    font-size: 16px;
    line-height: 130%;
    text-align: justify;
}

.pageMainContentLeft {
    float: left;
    width: 100px;
}

.pageMainContentRight {
    width: 600px;
    float: right;
    margin-right: 90px;
    text-align: justify;
}

.pageMainContentRight a{
    color:#000000;

和代码：

 <div id="pageMainContent">

                       <div class="pageMainContentLeft" style="width:100px; height:200px; padding-top:50px"><img alt="" src="image1.png" /></div>
                        <div class="pageMainContentRight" style="font-size:16px; line-height:130%;"><p><span style="font-size:24px; font-weight:600; font-family:Arial;">Text </span></p>More Text.</div><br />

                        <div style="clear:both"></div>

                        <div class="pageMainContentLeft" style="width:100px; height:160px; padding-top:40px"><img alt="" src="image2.png" /></div>
                        <div class="pageMainContentRight" style="font-size:16px; line-height:130%;"><p><span style="font-size:24px; font-weight:600; font-family:Arial;">Text </span></p>More Text.</div><br />

                        <div style="clear:both"></div><br />

                        <div class="pageMainContentLeft" style="width:100px; height:150px; padding-top:30px"><img alt="" src="image3.png" /></div>
                        <div class="pageMainContentRight" style="font-size:16px; line-height:130%; text-align:justify;"><p><span style="font-size:24px; font-weight:600; font-family:Arial;">Text </span></p>More Text.</div><br />

                        <div style="clear:both"></div>

                        <div class="pageMainContentLeft" style="width:100px; height:160px; padding-top:34px"><img alt="" src="image4.png" /></div>
                        <div class="pageMainContentRight" style="font-size:16px; line-height:130%; margin-top:-20px"><p><span style="font-size:24px; font-weight:600; font-family:Arial;">Text </span></p>Text </span></p>More Text.</div><br />

                    </div>

在div pageMainContent里面我想显示下面带有文字的4张图片（以盒子的形状）。四个div中每个div的正确布局是什么？

（它左边的图片然后文字下面然后是那张图片的右边图片，文字在下面 - 放下几个空格，再重复2个方框）

P-----------------------P
T-----------------------T

P-----------------------P
T-----------------------T

P - 图片 T - 文字

Answer 1

<div class="pageMainContentLeft" style="width:100px; height:200px; padding-top:50px">
<img alt="" src="image1.png" />
<div style="width:100px;"><p>Text Here</p></div>
</div>

也为正确的div做类似的事情。但是，我建议您重新构建代码，以便于您使用。

Answer 2

你遇到的主要问题是你混淆了哪些东西应该留下内容和正确的内容。我做了一个非常基本的制作盒子的方法。您可以根据需要对其进行格式化

  <div class="pageMainContentLeft">
     <img alt="image1" src="image1.png" />
  </div>  
  <div class="pageMainContentRight">
     <img alt="Image2" src="image2.png" />
 </div>


  <div style="clear:both"></div><br />

 <div class="pageMainContentLeft"><p>text</div>
 <div class="pageMainContentRight"><p>text</p></div>


     <div style="clear:both"></div><br />


  <div class="pageMainContentLeft">
     <img alt="image3" src="image3.png" />
  </div>  
  <div class="pageMainContentRight">
    <img alt="Image4" src="image4.png" />
  </div>


           <div style="clear:both"></div><br />

   <div class="pageMainContentLeft"><p>text</div>
   <div class="pageMainContentRight"><p>text</p></div>

 <style>

#pageMainContent {
    margin-top: 20px;
    margin-left: 40px;
    width: 800px;
    font-size: 16px;
    line-height: 130%;
    text-align: justify;
}

.pageMainContentLeft {
    float: left;
    width: 200px;
}

.pageMainContentRight {
    width: 200px;
    float: right;
}

</style>

Answer 3

<div class="sectionContainer">

  <div class="entry" >
        <div class="pageMainContentLeft" style="width:100px; height:200px; padding-top:50px">
            <img alt="" src="img/inspire/1.jpg" />
        </div>

        <div class="pageMainContentRight" style="font-size:16px; line-height:130%;">
                <p><span style="font-size:24px; font-weight:600; font-family:Arial;">Text </span>
                </p>More Text.
        </div>

  </div>


                    <div class="entry">
                    <div class="pageMainContentLeft" style="width:100px; height:200px; padding-top:50px">
                        <img alt="" src="img/inspire/1.jpg" />
                    </div>

                    <div class="pageMainContentRight" style="font-size:16px; line-height:130%;">
                        <p><span style="font-size:24px; font-weight:600; font-family:Arial;">Text </span>
                        </p>More Text.
                    </div>
                    </div>

</div>

如果将代码划分为多个部分，则可以更好地控制代码。

在我的代码中，带有sectionContainer类的div将显示为行，因为你不会在css中为它定义任何浮动。因此，根据定义，div元素是块元素，它们将显示为块，即一个在另一个之上。

对于类输入，在css左侧定义一个浮点数，它们将从左侧对齐。

确保.sectionContainer类的宽度足够宽，以容纳两个.entry项。

div布局 - 四个带有

3 个答案: