将文本和图像对齐

时间：2022-06-03 12:00:01

How can I align a div which contains text and an image next to each other so that it remains fixed until the width is around 768px?

如何将包含文本和图像的div对齐,使其保持固定,直到宽度约为768px?

This is my code:

这是我的代码:

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

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

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

Can anyone please let me know how to proceed. I am stuck at this point where I am unable to align it.

任何人都可以让我知道如何继续。我被困在这一点,我无法对齐它。

1 个解决方案

#1

0  

Please check this, the image and the content are placed next to each other until 768px and for screens smaller than 768px, the image is stacked above the content.

请检查一下,图像和内容彼此相邻,直到768px,对于小于768px的屏幕,图像堆叠在内容上方。

 .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

0  

Please check this, the image and the content are placed next to each other until 768px and for screens smaller than 768px, the image is stacked above the content.

请检查一下,图像和内容彼此相邻,直到768px,对于小于768px的屏幕,图像堆叠在内容上方。

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

标签：

相关文章