为什么图像没有完全显示，因为浮动，或者上面的图像

Question

我希望text2位于中间左侧的image3旁边，但不幸的是，它没有完全显示出来，并且在视觉上位于image2下方。这与css代码中的float标记或上面的图像2有关，但我不知道问题出在哪里，如果有人能帮忙就好了：(这是我的html代码；

.image2{
width: 1917px;
height: 523px;
}

.imagetwo{
width: 1917px;
height: 523px;
margin-top: 0px;
position:absolute;
}

.button1{
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #212f40;
color:white;
font-size: 30px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
width: 400px;
height: 90px;
}
.button1:hover {
background-color:#911e46;
}

.image3{
float:right; 
margin-left: 5em;
width: 905x;
height: 590px;
}
.imagethree .text2{
font-family: 'Montserrat', sans-serif;
margin-left:40px;
margin-top: 50px;
padding: 10px;
color: white !important;
text-align:center;
}

.<div class="imagetwo">
<img class="image2" src="https://pixabay.com/de/photos/erbse-erbsen-gem%C3%BCse-gr%C3%BCn-1205673/">
<button class="button1">Jetzt informieren </button>
</div>
<div class="imagethree">
<img class="image3" src="https://pixabay.com/de/photos/aufsicht-closeup-vegetarismus-1248949/">
<div class="text2">
<h1>Lass dich beraten</h1>
<p>Wir geben unser bestes für jeden Einzelnen.</p><br>
<p>Ich begleite dich auf dem Weg zu mehr Wohlbefinden...
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <br>
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat <br>
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
<br>
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <br>
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
</p>
</div>
</div>

Answer 1

如果使用float，请给图像一个宽度。否则，它将以全尺寸显示(如果图像为4000px宽，则显示宽度为4000px，可能会溢出每个屏幕。这就是float的实际工作方式：

.image3{
float: right; 
margin-left: 5em;
width: 50%;
}

.text2{
font-family: 'Montserrat', sans-serif;
text-align: center;
}

<img class="image3" src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg">

<div class="text2">
<h1>LOREM IPSUM</h1>
<p class="one1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><br>
<p class="two1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<br>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>

如果你想使用CSS网格，那么图像不会浮动，而是在etxt旁边的一列中，文本只会保留在自己的列中。然而，你需要包装文本和图像，并且应该将图像放在文本下面(HTML方面(

.image3 {
width: 100%;
}
.text2 {
font-family: 'Montserrat', sans-serif;
text-align: center;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 5em;
}

<div class="wrapper">
<div class="text2">
<h1>LOREM IPSUM</h1>
<p class="one1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><br>
<p class="two1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<br>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<img class="image3" src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg">
</div>

Answer 2

您可以使用flex来实现这一点，浮点处理起来有点棘手，因为从DOM 中取出流中的元素

在下方用div sampe包装您的文本和图像

.wrapper{
display:flex;
align-items:center;
max-width:500px;/*can set a with so it does not expand full with*/
margin:auto; /*center it on the page*/
}
.text{
text-align:center;
padding:20px;
}
.image{ width:100px; height:100px } /*optional image size*/

<div class="wrapper">
<div class="text">
<h1>Header</h1>
<p>I'm baby letterpress art party beard normcore +1 DIY truffaut leggings jean shorts photo booth. Hoodie palo santo letterpress iPhone occupy pickled normcore. Cardigan schlitz occupy letterpress tattooed normcore wolf leggings iPhone vape locavore truffaut coloring book lumbersexual bicycle rights. Tacos echo park letterpress salvia vexillologist listicle kitsch lumbersexual hammock pinterest occupy post-ironic. Food truck pop-up farm-to-table copper mug pabst iPhone twee XOXO YOLO messenger bag polaroid vinyl ethical vegan retro.</p>
</div>
<img class="image" src="https://i.picsum.photos/id/554/200/200.jpg?hmac=wvBDWVN6iXLUYv4DYpQ9fWSg_2y3dCYyzy4N_6H26pY" />
</div>