Размещение и меню для размещения HTML и CSS

Question

Хорошо, у меня есть 3 столбца, и мне нужно поместить 3 изображения в круг поверх этих 3 столбцов, и, похоже, у меня кончились идеи, как это сделать. Heres HTML-:

<div id="content"> 
    <div class="col1"> 
<img src="img"/> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </p> 
     </div> 
     <div class="col2"> 
     <img src="img"/> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </p> 
     </div> 
     <div class="col3"> 
     <img src="img"/> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </p> 
     </div> 
    </div> 

И Херес CSS:

.col1 { 
float:left; 
width:33%; 
} 
.col2 { 
float:right; 
width:33%; 
} 
.col3 { 
display: inline-block; 
width:33%; 
} 

Answer 1

Если я получил свой вопрос, мой snipset является то, что вы ищете. Я сделал некоторые изменения CSS, и здесь вы идете.

.col1 { 
 
float:left; 
 
width:30%; 
 
margin-left:10px; 
 
text-align: justify; 
 
} 
 
.col2 { 
 
float:left; 
 
width:30%; 
 
margin-left: 10px; 
 
margin-right: 10px; 
 
text-align: justify; 
 
} 
 
.col3 { 
 
display: inline-block; 
 
width:30%; 
 
margin-right:10px; 
 
text-align: justify; 
 
} 
 

 
.col1 img{ 
 
height: 100px; 
 
width: 100px; 
 
border-radius: 50%; 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.col2 img{ 
 
height: 100px; 
 
width: 100px; 
 
border-radius: 50%; 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.col3 img{ 
 
height: 100px; 
 
width: 100px; 
 
border-radius: 50%; 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
}

<div id="content"> 
 
    <div class="col1"> 
 
<img src="img"/> 
 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
     </p> 
 
     </div> 
 
     <div class="col2"> 
 
     <img src="img"/> 
 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
     </p> 
 
     </div> 
 
     <div class="col3"> 
 
     <img src="img"/> 
 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
     </p> 
 
     </div> 
 
    </div>

ли эта помощь?

Answer 2

Попробуйте добавить это к вашему CSS:

img { 
border-radius: 100%; 
}