我试图有一个三列的部分，它有三个不同的div，每个div包含一个h2和一个p元素。我想在右对齐时左侧，中间一个对齐中心，右侧对齐左侧。我使用nth-type实现了这一点，但是我无法弄清楚如何将它们放在正确的位置，以便所有内容相互排列。
body {
background-color: #EAE8EB;
}
wrap {
margin: auto;
}
#topbar {
width: 105%;
height: 50px;
background-color: #000;
margin-left: -2.5%;
margin-top: -10px;
}
#jumbotron {
width: 105%;
margin-left: -2.5%;
height: 900px;
background-repeat: no-repeat;
background-size: cover;
background-image: url('http://www.arcanemarketing.com/wp-content/uploads/2013/05/placeholder.png');
}
#recent {
margin: auto;
background-color: #3C5F7C;
width: 105%;
margin-left: -2.5%;
height: 250px;
margin-top: -20px;
}
#recent h1 {
text-align: center;
font-family: 'Alegreya Sans SC', sans-serif;
font-size: 38px;
font-weight: 700;
padding-top: 10px;
color: #EEF0F2;
}
#galleries {
width: 105%;
margin-left: -2.5%;
height: 250px;
background-color: #3c5f7c;
}
#galleries h2 {
font-size: 32px;
font-family: 'Alegreya Sans SC', sans-serif;
font-weight: 500;
color: #EEF0F2;
}
#galleries div:nth-of-type(1) h2 {
text-align: right;
}
#galleries div:nth-of-type(2) h2 {
text-align: center;
}
#galleries div:nth-of-type(3) h2 {
text-align: left;
}
#galleries p {
font-size: 18px;
font-family: 'Catamaran', sans-serif;
font-weight: 300;
color: #eef0f2;
max-width: 360px;
}
#galleries div:nth-of-type(1) p {
text-align: right;
margin: auto;
}
#galleries div:nth-of-type(2) p {
text-align: center;
margin: auto;
}
#galleries div:nth-of-type(3) p {
text-align: left;
margin: auto;
}<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,500,700,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Catamaran:400,300,500' rel='stylesheet' type='text/css'>
<div id="wrap">
<div id="topbar">
</div>
<div id="menu">
</div>
<div id="logo">
</div>
<div id="jumbotron">
</div>
<div id="recent">
<h1>Recent Work</h1>
<div id="thumbnail"></div>
</div>
<div id="galleries">
<div class="row">
<div class="col-md-4">
<h2>Website Design</h2>
<p>Extensive experience with image editing software, html and css code, and a unique perspective of an IT major formerly in graphic design.</p>
</div>
<div class="col-md-4">
<h2>Software Engineering</h2>
<p>Information Technology second-semester Sophomore at State University of New York at Cobleskill. Passion for solving problems with logic and code.</p>
</div>
<div class="col-md-4">
<h2>Other Work</h2>
<p>Former graphic artist with a background in a hobbyist form of art known as forum signatures.</p>
</div>
</div>
</div>
<div id="sn">
</div>
</div>
此外，我不确定如何让jsfiddle中的bootstrap工作抱歉:( https://jsfiddle.net/5bep97xw/
答案 0 :(得分：2)
nth-child这个想法很好。但看起来你需要更新媒体查询，这是什么105％width？
body {
background-color: #EAE8EB;
}
wrap {
margin: auto;
}
#topbar {
/* width: 105%; why ? */
height: 50px;
background-color: #000;
margin-left: -2.5%;
margin-top: -10px;
}
#jumbotron {
/* width: 105%;
margin-left: -2.5%;
height: 900px; why ? */
background-repeat: no-repeat;
background-size: cover;
background-image: url('http://www.arcanemarketing.com/wp-content/uploads/2013/05/placeholder.png');
}
#recent {
margin: auto;
background-color: #3C5F7C;
/* width: 105%;
margin-left: -2.5%;
height: 250px; why ? */
margin-top: -20px;
}
#recent h1 {
text-align: center;
font-family: 'Alegreya Sans SC', sans-serif;
font-size: 38px;
font-weight: 700;
padding-top: 10px;
color: #EEF0F2;
}
#galleries {
/* width: 105%;
margin-left: -2.5%;
min-height: 250px; do not fix an height and not too sure about margins and width */
background-color: #3c5f7c;
}
#galleries h2 {
font-size: 32px;
font-family: 'Alegreya Sans SC', sans-serif;
font-weight: 500;
color: #EEF0F2;
}
#galleries div:nth-of-type(1) h2 {
text-align: right;
}
#galleries div:nth-of-type(2) h2 {
text-align: center;
}
#galleries div:nth-of-type(3) h2 {
text-align: left;
}
#galleries p {
font-size: 18px;
font-family: 'Catamaran', sans-serif;
font-weight: 300;
color: #eef0f2;
/* max-width: 360px; better fix a max-width on parents container ? */
padding:1em;/* might be usefull */
margin:0;/* might be usefull */
}
#galleries div:nth-of-type(1) p {
text-align: right;
margin: auto;
}
#galleries div:nth-of-type(2) p {
text-align: center;
margin: auto;
}
#galleries div:nth-of-type(3) p {
text-align: left;
margin: auto;
}
@media (max-width:990px){
div div#galleries div[class] p,
div div#galleries div[class] h2 {
text-align:center; /* or left or right */
}
}<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,500,700,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Catamaran:400,300,500' rel='stylesheet' type='text/css'>
<div id="wrap">
<div id="topbar">
</div>
<div id="menu">
</div>
<div id="logo">
</div>
<div id="jumbotron">
</div>
<div id="recent">
<h1>Recent Work</h1>
<div id="thumbnail"></div>
</div>
<div id="galleries">
<div class="row">
<div class="col-md-4">
<h2>Website Design</h2>
<p>Extensive experience with image editing software, html and css code, and a unique perspective of an IT major formerly in graphic design.</p>
</div>
<div class="col-md-4">
<h2>Software Engineering</h2>
<p>Information Technology second-semester Sophomore at State University of New York at Cobleskill. Passion for solving problems with logic and code.</p>
</div>
<div class="col-md-4">
<h2>Other Work</h2>
<p>Former graphic artist with a background in a hobbyist form of art known as forum signatures.</p>
</div>
</div>
</div>
<div id="sn">
</div>
</div>