2015-12-23 30 views
1

我的目標是在保持液體佈局的同時,讓這些圖像中的每一個都位於其各自的列中。每個圖像應該在每個列中居中(例如每個列居中一個標誌)。任何幫助將不勝感激,因爲這是一項任務。由於以列爲中心的圖像(液體佈局)

HTML和CSS代碼

.two \t { 
 
\t \t \t \t \t \t -moz-column-count: 2; 
 
\t \t \t \t \t \t -webkit-column-count: 2; 
 
\t \t \t \t \t \t column-count: 2; 
 
\t \t \t \t \t } 
 
      
 
      .column1 { 
 
       width:33%; 
 
       float:left; 
 
      } 
 
      
 
      .column2 { 
 
       width:33%; 
 
       display: inline-block; 
 
      } 
 
      
 
      .column3 { 
 
       width:33%; 
 
       float:right; 
 
      }
<p class="two"> 
 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
 
\t \t \t tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At 
 
\t \t \t vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
 
\t \t \t no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, 
 
\t \t \t consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et 
 
\t \t \t dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
\t \t \t dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
 
\t \t \t dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
 
\t \t \t eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At 
 
\t \t \t vero eosle et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
 
      takimata sanctus est Lorem ipsum dolor sit amet.</p> 
 
\t  
 
     <p class="column1"> 
 
    \t \t \t <img src="australia_flag.jpg" height="200" width="300" /> <br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
 
\t \t \t tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At 
 
\t \t \t vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
 
\t \t \t no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, 
 
\t \t \t consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et 
 
\t \t \t dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
\t \t \t dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
 
\t \t \t dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
 
\t \t \t eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At 
 
\t \t \t vero eosle et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
 
\t \t \t takimata sanctus est Lorem ipsum dolor sit amet. 
 
\t \t </p> 
 
     
 
     <p class="column2"> 
 
    \t \t \t <img src="brazil_flag.jpg" height="200" width="300" /> <br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
 
\t \t \t tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At 
 
\t \t \t vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
 
\t \t \t no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, 
 
\t \t \t consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et 
 
\t \t \t dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
\t \t \t dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
 
\t \t \t dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
 
\t \t \t eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At 
 
\t \t \t vero eosle et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
 
\t \t \t takimata sanctus est Lorem ipsum dolor sit amet. 
 
\t \t </p> 
 
     
 
     <p class="column3"> 
 
    \t \t \t <img src="china_flag.jpg" height="200" width="300" /> <br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
 
\t \t \t tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At 
 
\t \t \t vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
 
\t \t \t no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, 
 
\t \t \t consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et 
 
\t \t \t dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
\t \t \t dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
 
\t \t \t dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
 
\t \t \t eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At 
 
\t \t \t vero eosle et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
 
\t \t \t takimata sanctus est Lorem ipsum dolor sit amet. 
 
\t \t </p> 
 
    

謝謝!

回答

1

只需將此CSS添加到每個圖像:

image { 
    display: block; 
    margin: 0 auto; 
} 

margin: 0 auto將自動設置側邊(定心他們)。該display: block必要使邊緣工作(不上inline-block,該圖像是由默認工作。

看到它在JSFiddle工作。


另外,應避免使用過時的widthheight屬性;使用CSS widthheight,而不是

+0

謝謝你的建議的。沒有意識到這件事很簡單。另外,我會採納你的建議。 – airsickbachus3

0

也有也其他幾個備選方案,據我知道,因爲我沒有以任何方式親

。 10

你也可以嘗試這個,如果它的工作。

image { 
    display: flex; 
    align-items: center; 
} 

是的,它是更好地使用CSS「寬度」和「高度」,而不是那些過時