javascript - 使用html css垂直排列4个div

Question

自 4 小时以来，我一直在尝试垂直并排排列 4 个 div。这些 div 内部也有 2 个 div，用于图像和段落。我能够将 4 个图像 div 彼此相邻排列，但段落div 很难对齐。

我正在使用的代码:

.left4 {
  width: 215px;
  float: left;
}
.center4 {
  float: left;
  width: 215px;
  padding-right: 50px;
  padding-left: 50px;
}
.center4.1 {
  width: 215px;
  float: right;
  padding-left: 10px;
  float: left;
}
.right4 {
  width: 215px;
  float: left;
  padding-left: 40px;
}
.image4 {
  height: 100px;
  width: 215px;
  border: 4px;
  border-style: double;
  border-color: #BABABA;
  float: left;
  margin-top: 10px;
}
.para1 {
  height: 200px;
  color: #BABABA;
}

<div class="4">
  <div class="left4">
    <div class="image4">
      <img>
    </div>
    <div class="para1">
      <h3 style="color:#BABABA">INDONECTETUS FACILIS</h3>
      <p>Some wiki engines are open source, whereas others are proprietary. Some permit control over different functions (levels of access)</p>
      <p align="right"><a href="#" style="color:orange;text-decoration:none">Read More >></a>
      </p>
    </div>
  </div>
  <div class="center4">
    <div class="image4">
      <img>
    </div>
    <div class="para1">
      <h3 style="color:#BABABA">INDONECTETUS FACILIS</h3>
      <p>Some wiki engines are open source, whereas others are proprietary. Some permit control over different functions (levels of access)</p>
      <p align="right"><a href="#" style="color:orange;text-decoration:none">Read More >></a>
      </p>
    </div>
  </div>

  <div class="center4.1">
    <div class="image4">
      <img>
    </div>
    <div class="para1">
      <p>Some wiki engines are open source, whereas others are proprietary. Some permit control over different functions (levels of access)</p>
      <p align="right"><a href="#" style="color:orange;text-decoration:none">Read More >></a>
      </p>
    </div>
  </div>


  <div class="right4">
    <div class="image4">
      <img>
    </div>
    <div class="para1">
      <h3 style="color:#BABABA">INDONECTETUS FACILIS</h3>
      <p>Some wiki engines are open source, whereas others are proprietary. Some permit control over different functions (levels of access)</p>
    </div>
  </div>

Answer 1

您不能使用 .center4.1。在 CSS 中，这意味着您正在尝试访问多个类 center4 和 1。将其更改为 .center4-1

.left4 {
   width: 215px;
   float: left;
 }
 .center4 {
   float: left;
   width: 215px;
   padding-right: 50px;
   padding-left: 50px;
 }
 .center4-1 {
   width: 215px;
   float: right;
   padding-left: 10px;
   float: left;
 }
 .right4 {
   width: 215px;
   float: left;
   padding-left: 40px;
 }
 .image4 {
   height: 100px;
   width: 215px;
   border: 4px;
   border-style: double;
   border-color: #BABABA;
   float: left;
   margin-top: 10px;
 }
 .para1 {
   height: 200px;
   color: #BABABA;
 }

<div class="4">
  <div class="left4">
    <div class="image4">
      <img>
    </div>
    <div class="para1">
      <h3 style="color:#BABABA">INDONECTETUS FACILIS</h3>
      <p>Some wiki engines are open source, whereas others are proprietary. Some permit control over different functions (levels of access)</p>
      <p align="right"><a href="#" style="color:orange;text-decoration:none">Read More >></a>
      </p>
    </div>
  </div>
  <div class="center4">
    <div class="image4">
      <img>
    </div>
    <div class="para1">
      <h3 style="color:#BABABA">INDONECTETUS FACILIS</h3>
      <p>Some wiki engines are open source, whereas others are proprietary. Some permit control over different functions (levels of access)</p>
      <p align="right"><a href="#" style="color:orange;text-decoration:none">Read More >></a>
      </p>
    </div>
  </div>

  <div class="center4-1">
    <div class="image4">
      <img>
    </div>
    <div class="para1">
      <p>Some wiki engines are open source, whereas others are proprietary. Some permit control over different functions (levels of access)</p>
      <p align="right"><a href="#" style="color:orange;text-decoration:none">Read More >></a>
      </p>
    </div>
  </div>


  <div class="right4">
    <div class="image4">
      <img>
    </div>
    <div class="para1">
      <h3 style="color:#BABABA">INDONECTETUS FACILIS</h3>
      <p>Some wiki engines are open source, whereas others are proprietary. Some permit control over different functions (levels of access)</p>
    </div>
  </div>