CSS BS nth類型頁邊距與BS

Question

我想有一個三列部分有三個不同的div，每個包含一個h2和一個p元素。我想在左對齊時左右對齊，中間對齊中心，右邊對齊左邊。我使用第n種類型實現了這一點，但我無法弄清楚如何讓它們處於正確的位置，以便所有東西都相互排成一行。

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抱歉:( https://jsfiddle.net/5bep97xw/

Answer 1

的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>