我的目標是在保持液體佈局的同時,讓這些圖像中的每一個都位於其各自的列中。每個圖像應該在每個列中居中(例如每個列居中一個標誌)。任何幫助將不勝感激,因爲這是一項任務。由於以列爲中心的圖像(液體佈局)
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>
謝謝!
謝謝你的建議的。沒有意識到這件事很簡單。另外,我會採納你的建議。 – airsickbachus3