如何对齐包含彼此相邻的文本和图像的 div，使其保持固定直到宽度约为 768 像素？
这是我的代码:
<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%}
任何人都可以告诉我如何进行。我被困在无法对齐的地方。
最佳答案
请检查这一点，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>关于html - 将文本和图像彼此对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26454466/