如何在CSS中将三个div彼此相邻并将它们居中？

问题描述

我试图看看我如何能够浮动我的三个div，包括一个标题，一个段落和段落下方的更多信息按钮。



CSS



#individual h2 span {

宽度：172px;

font-family：Oriya MN;

字体大小：14px;

文字装饰：下划线;

}



#individual h2 {

margin-left：-50px;

填充：50px;

}



#individual .para1 {

margin-top：-50px;

字体大小：12px;

宽度：245px;

font-family：Lao Sangam MN;

}



#individual .readmore a {

宽度：68px;

文字装饰：下划线;

字体大小：12px;

font-家庭：老挝MN;

}



#specialized h2 span {

宽度：153px;

font-family：Oriya MN;

字体大小：14px;

text-decoration：下划线;

}



#specialized .para1 {

字体大小：12px;

宽度：251px;

font-family：Lao Sangam MN;

}



＃专业.readmore a {

宽度：68px;

字体大小：12px;

font-family：Lao MN;

文字装饰：下划线;

}



#custom h2 span {

宽度： 212px;

字体大小：14px;

字体系列：Oriya MN;

文字装饰：下划线;

}



#custom .para1 {

font-family：Lao Sangam MN;

字体-size：12px;

宽度：243px;

}



#custom .readmore a {

宽度：72px;

字体大小：11px;

text-decoration：下划线;

font-family：老挝MN;

}



HTML



div id =个人>

< h2>< span> Ind ividual Training< / span>< / h2>

< p class =para1> Cum sociis natoque penatibus et magnis dis parturient montes，nascetur ridiculus mus。 Nulla dui。 Fusce feugiat malesuada odio。 Morbi nunc odio，gravida at，cursus nec，luctus a，lorem。 Maecenas tristique orci ac sem。< / p>

< p class =readmore>< a href =＃>更多信息< / a>< / p>

< / div>

< div id =specialized>

< h2>< span>专业培训< / span>< / h2>

< p class =para1> Cum sociis natoque penatibus et magnis dis parturient montes，nascetur ridiculus mus。 Nulla dui。 Fusce feugiat malesuada odio。 Morbi nunc odio，gravida at，cursus nec，luctus a，lorem。 Maecenas tristique orci ac sem。< / p>

< p class =readmore>< a href =＃>更多信息< / a>< / p>

< / div>

< div id =custom>

< h2>< span> Custom Solutions< / span>< / h2>

< p class =para1> Cum sociis natoque penatibus et magnis dis parturient montes，nascetur ridiculus mus。 Nulla dui。 Fusce feugiat malesuada odio。 Morbi nunc odio，gravida at，cursus nec，luctus a，lorem。 Maecenas tristique orci ac sem。< / p>

< p class =readmore>< a href =＃>更多信息< / a>< / p>

< / div>



我尝试过：



浮动：正确;

浮动：左;

显示：内联;

显示：内联块;

显示：块;

显示：表格;

显示：table-cell;

I am trying to see how i can float my three divs that consist of a heading, a paragraph and a more-info button below the paragraphs.

CSS

#individual h2 span {
width: 172px;
font-family: Oriya MN;
font-size: 14px;
text-decoration: underline;
}

#individual h2 {
margin-left: -50px;
padding: 50px;
}

#individual .para1 {
margin-top: -50px;
font-size: 12px;
width: 245px;
font-family: Lao Sangam MN;
}

#individual .readmore a {
width: 68px;
text-decoration: underline;
font-size: 12px;
font-family: Lao MN;
}

#specialized h2 span {
width: 153px;
font-family: Oriya MN;
font-size: 14px;
text-decoration: underline;
}

#specialized .para1 {
font-size: 12px;
width: 251px;
font-family: Lao Sangam MN;
}

#specialized .readmore a {
width: 68px;
font-size: 12px;
font-family: Lao MN;
text-decoration: underline;
}

#custom h2 span {
width: 212px;
font-size: 14px;
font-family: Oriya MN;
text-decoration: underline;
}

#custom .para1 {
font-family: Lao Sangam MN;
font-size: 12px;
width: 243px;
}

#custom .readmore a {
width: 72px;
font-size: 11px;
text-decoration: underline;
font-family: Lao MN;
}

HTML

div id="individual">
<h2><span>Individual Training</span></h2>
<p class="para1">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orci ac sem.</p>
<p class="readmore"><a href="#">More Info</a></p>
</div>
<div id="specialized">
<h2><span>Specialized Training</span></h2>
<p class="para1">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orci ac sem.</p>
<p class="readmore"><a href="#">More Info</a></p>
</div>
<div id="custom">
<h2><span>Custom Solutions</span></h2>
<p class="para1">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orci ac sem.</p>
<p class="readmore"><a href="#">More Info</a></p>
</div>

What I have tried:

float: right;
float: left;
display: inline;
display: inline-block;
display: block;
display: table;
display: table-cell;

推荐答案

，然后将其他< div>放入其中。

and then put your other <div>'s inside of it.

<div style="margin:0 auto 0 auto;">
  <div></div>
  <div></div>
  <div></div>
</div>

您可能需要调整内部< div>的大小，并且可能通过position：relative;调整外部< div>的大小。也许是必要的，特别是控制宽度。

You'll likely have to size your inner <div>'s and perhaps locate them via position:relative; Sizing the outer<div> may also be necessary, particularly to control the width.

这篇关于如何在CSS中将三个div彼此相邻并将它们居中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！