Аранжировка 4 divs параллельно по вертикали с использованием html css

Question

Я пытаюсь с 4-х часов устраивать 4 div бок о бок по вертикали. В div также есть 2 div внутри него, для изображения и абзаца. Я могу организовать 4 image 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>

Answer 2

Я puuting некоторые базовые концепции, как вы можете сделать this.It будет работать во всех размерах

HTML

<div id="container"> 
    <div class="box"> 
     <div class="text">Text</div> 
    </div> 
    <div class="box"> 
     <div class="text">Text</div> 
    </div> 
    <div class="box"> 
     <div class="text">Text</div> 
    </div> 
    <div class="box"> 
     <div class="text">Text</div> 
    </div> 
</div> 

CSS

.box { 
     background-color: coral; 
     width: 30%; 
     display:inline-block; 
     margin:10px 0; 
     border-radius:5px; 
    } 
    .text { 
     padding: 10px 0; 
     color:white; 
     font-weight:bold; 
     text-align:center; 
    } 

Answer 3

Может быть, так?

С дисплеем: flex; у вас есть простой способ, чтобы обернуть Flex How?

CSS

.container{ 
    width: 100%; 
    display: flex; 
} 

.box{ 
    width: 25%; 
    height: auto; 
    margin: 5px; 
    padding: 5px; 
} 

.img{ 
    width: 200px; 
    height: 200px; 
    border: 1px solid #BABABA; 
    margin: 0 auto; 
} 

.text{ 
} 

HTML

<div class="container"> 
<div class="box"> 
    <div class="img"> 

    </div> 
    <div class="text"> 
     <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="box"> 
    <div class="img"> 

    </div> 
    <div class="text"> 
     <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="box"> 
    <div class="img"> 

    </div> 
    <div class="text"> 
     <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="box"> 
    <div class="img"> 

    </div> 
    <div class="text"> 
     <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>