Question

如何将包含文本和图像的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%}

任何人都可以告诉我如何继续。我被困在这一点，我无法对齐它。

Answer 1

请检查此项，image和content彼此相邻，直到768px，对于小于768px的屏幕，图片会堆放在content上方{1}}。

 .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>

将文本和图像对齐

1 个答案: