將文本和圖像相鄰對齊

如何將包含文本和圖像的div對齊，以便它保持固定，直到寬度爲768px左右？將文本和圖像相鄰對齊

這是我的代碼：

<html> 
<head></head> 
<body> 
<div class="column_1"> 
    Contains bigger width 
</div> 
<div class="column_2"> 
<div class="imageSection"> 
<img src="http://www.smashbros.com/wii/en_uk/characters/images/link/link.jpg"> 
</div> 
<div class="text"> 
<div class="text1">Data will be here</div> 
<div class="text1">Data will be here</div> 
<div class="text1">Data will be here</div> 
</div> 
</div> 
</body> 
</html>

CSS樣式

.column_1 {width:65%;} 
.column_2 {width: 35%;} 

.column_2 .imageSection {width:45%; display:block; float:left} 
.column_2 text {width:45%}

任何人都可以請讓我知道如何着手。我被困在這一點，我無法調整它。

來源

2014-10-19 user2247838

請檢查此，在image和content並排放置成彼此直到768px和屏幕比768px越小，圖像堆疊在content上方。

.column_1 { 
 
    width:65%; 
 
} 
 
.column_2 { 
 
    width: 35%; 
 
} 
 
.column_2 .imageSection { 
 
    width:45%; 
 
    display:block; 
 
    float: left; 
 
} 
 
.column_2 text { 
 
    width:45% 
 
} 
 
@media (max-width: 768px) { 
 
    .column_2 .imageSection { 
 
     float: none; 
 
    } 
 
}

<div class="column_1">Contains bigger width</div> 
 
<div class="column_2"> 
 
    <div class="imageSection"> 
 
     <img src="http://www.smashbros.com/wii/en_uk/characters/images/link/link.jpg" width="100%"> 
 
    </div> 
 
    <div class="text"> 
 
     <div class="text1">Data will be here</div> 
 
     <div class="text1">Data will be here</div> 
 
     <div class="text1">Data will be here</div> 
 
    </div> 
 
</div>

來源

2014-10-19 19:40:10

將文本和圖像相鄰對齊

回答

相關問題