2016-11-14 90 views
0

如何對齊海報圖像,以便兩段的「早期職業生涯」和「奧運金獎」以及足夠的空間距離頂部段落足夠好。 。在引導佈局中對齊圖像

<div class="container"> 
    <h1>Muhammad Ali</h1> 
    <img src=https://www.dropbox.com/s/nacb0kyk57qlbp2/Muhammad-Ali.jpg?dl=1 class="img-responsive"> 
    <blockquote>I am the greatest,I said that even before i knew i was</blockquote> 
    <p>Muhammad Ali born January 17, 1942 – June 3, 2016) was an American professional boxer and activist. He was widely regarded as one of the most significant and celebrated sports figures of the 20th century. From early in his career, Ali was known as an inspiring, controversial, and polarizing figure both inside and outside the ring</p> 

    <div class="row"> 
    <div class="col-md-8"> 

     <h2>Early Career</h2> 
     <p>Clay made his professional debut on October 29, 1960, winning a six-round decision over Tunney Hunsaker. From then until the end of 1963, Clay amassed a record of 19–0 with 15 wins by knockout. He defeated boxers including Tony Esperti, Jim Robinson, Donnie Fleeman, Alonzo Johnson, George Logan, Willi Besmanoff, Lamar Clark, Doug Jones and Henry Cooper. Clay also beat his former trainer and veteran boxer Archie Moore in a 1962 match.</p> 


     <h2>Olympic Gold</h2> 
     <p> 
      In 1960, Ali won a spot on the U.S. Olympic boxing team, and traveled to Rome, Italy, to compete. At 6' 3", Ali was an imposing figure in the ring, but he also became known for his lightning speed and fancy footwork. After winning his first three bouts, Ali defeated Zbigniew Pietrzkowski from Poland to win the light heavyweight gold medal. 

After his Olympic victory, Ali was heralded as an American hero. He soon turned professional with the backing of the Louisville Sponsoring Group, and continued overwhelming all opponents in the ring. Ali took out British heavyweight champion Henry Cooper in 1963, and then knocked out Sonny Liston in 1964 to become the heavyweight champion of the world. 

Often referring to himself as "the greatest," Ali was not afraid to sing his own praises. He was known for boasting about his skills before a fight and for his colorful descriptions and phrases. In one of his more famously quoted descriptions, Ali told reporters that he could "float like a butterfly, sting like a bee" in the boxing ring. 
     </p> 
     <h2>Conversion to Islam</h2> 
     <p>This bold public persona belied what was happening in Ali's personal life, however. He was doing some spiritual searching and decided to join the black Muslim group the Nation of Islam in 1964. At first he called himself "Cassius X" before settling on the name Muhammad Ali. (The boxer eventually converted to orthodox Islam during the 1970s.) 

Ali later started a different kind of fight with his outspoken views against the Vietnam War. Drafted into the military in April 1967, he refused to serve on the grounds that he was a practicing Muslim minister with religious beliefs that prevented him from fighting. He was arrested for committing a felony and almost immediately stripped of his world title and boxing license. 

The U.S. Department of Justice pursued a legal case against Ali, denying his claim for conscientious objector status. He was found guilty of violating Selective Service laws and sentenced to five years in prison in June 1967, but remained free while appealing his conviction. Unable to compete professionally in the meantime, Ali missed more than three prime years of his athletic career. The U.S. Supreme Court eventually overturned the conviction in June 1971.</p> 

    </div> 
    <div class="col-md-4" margin-right="900"> 
     <div class ="img1"> 
     <img src="https://www.dropbox.com/s/2m0v8y814d1n5uk/1961_Cassius_Clay_vs._Donnie_Fleeman_On-Site_Poster.jpg?dl=1" class= "img-thumbnail" width="236" height="304" > 
     </div> 
     </div> 
    </div><!---firstRow--> 
</div> <!----.container---> 

回答

0

你絕對可以做到這一點將建立在Bootstrap CSS媒體組件。

審查Media alignment

我還創建了一個jsFiddle供您查看。

在代碼中特別要注意註釋的

<div class="media-left media-middle"> 

後讓我知道是否有幫助。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container-fluid"> 
 
    <h1>Muhammad Ali</h1> 
 
    <img src=https://www.dropbox.com/s/nacb0kyk57qlbp2/Muhammad-Ali.jpg?dl=1 class="img-responsive"> 
 
    <blockquote>I am the greatest,I said that even before i knew i was</blockquote> 
 
    <p>Muhammad Ali born January 17, 1942 – June 3, 2016) was an American professional boxer and activist. He was widely regarded as one of the most significant and celebrated sports figures of the 20th century. From early in his career, Ali was known as an inspiring, controversial, and polarizing figure both inside and outside the ring</p> 
 

 
    <div class="row"> 
 
    <div class="col-md-8"> 
 
     <div class="media-left media-middle"> <!-- if you do not want the img to show in the middle change media-middle to media-top or media-bottom--> 
 
     <img src="https://www.dropbox.com/s/2m0v8y814d1n5uk/1961_Cassius_Clay_vs._Donnie_Fleeman_On-Site_Poster.jpg?dl=1" class= "img-thumbnail media-object" width="236" height="304" > 
 
     </div><!--/.media-left .media-middle--> 
 
     <div class="media-body"> 
 
     <h2>Early Career</h2> 
 
     <p>Clay made his professional debut on October 29, 1960, winning a six-round decision over Tunney Hunsaker. From then until the end of 1963, Clay amassed a record of 19–0 with 15 wins by knockout. He defeated boxers including Tony Esperti, Jim Robinson, Donnie Fleeman, Alonzo Johnson, George Logan, Willi Besmanoff, Lamar Clark, Doug Jones and Henry Cooper. Clay also beat his former trainer and veteran boxer Archie Moore in a 1962 match.</p> 
 

 

 
     <h2>Olympic Gold</h2> 
 
     <p> 
 
      In 1960, Ali won a spot on the U.S. Olympic boxing team, and traveled to Rome, Italy, to compete. At 6' 3", Ali was an imposing figure in the ring, but he also became known for his lightning speed and fancy footwork. After winning his first three bouts, Ali defeated Zbigniew Pietrzkowski from Poland to win the light heavyweight gold medal. 
 

 
After his Olympic victory, Ali was heralded as an American hero. He soon turned professional with the backing of the Louisville Sponsoring Group, and continued overwhelming all opponents in the ring. Ali took out British heavyweight champion Henry Cooper in 1963, and then knocked out Sonny Liston in 1964 to become the heavyweight champion of the world. 
 

 
Often referring to himself as "the greatest," Ali was not afraid to sing his own praises. He was known for boasting about his skills before a fight and for his colorful descriptions and phrases. In one of his more famously quoted descriptions, Ali told reporters that he could "float like a butterfly, sting like a bee" in the boxing ring. 
 
     </p> 
 
     <h2>Conversion to Islam</h2> 
 
     <p>This bold public persona belied what was happening in Ali's personal life, however. He was doing some spiritual searching and decided to join the black Muslim group the Nation of Islam in 1964. At first he called himself "Cassius X" before settling on the name Muhammad Ali. (The boxer eventually converted to orthodox Islam during the 1970s.) 
 

 
Ali later started a different kind of fight with his outspoken views against the Vietnam War. Drafted into the military in April 1967, he refused to serve on the grounds that he was a practicing Muslim minister with religious beliefs that prevented him from fighting. He was arrested for committing a felony and almost immediately stripped of his world title and boxing license. 
 

 
The U.S. Department of Justice pursued a legal case against Ali, denying his claim for conscientious objector status. He was found guilty of violating Selective Service laws and sentenced to five years in prison in June 1967, but remained free while appealing his conviction. Unable to compete professionally in the meantime, Ali missed more than three prime years of his athletic career. The U.S. Supreme Court eventually overturned the conviction in June 1971.</p> 
 
     </div><!--/.media-body> 
 
    </div><!---/.row--> 
 
</div><!--/.container-fluid-->