html - 如何将内容放入框中并使其响应？

Question

我有一个我无法解决的简单问题，似乎缺少一些简单的东西。我这里有一个代码，我希望有许多内容相似的气泡，但我的文本变得杂乱无章，因为我使用了奇怪的边距数字来使其适合该特定分辨率。

我觉得我缺少一个重要的语法，它可以使整个事情变得更容易，所以我的目标是让图像适合两边，并将文本放在中间以使气泡响应。

感谢您的帮助:)

这是我的代码片段

body {
width: 100%;
height: 100%;
margin:0;    
}

.bubble-content {
width: 800px;
margin: auto;
text-align: center;
}

.MaleLogo {
width: 25%;
float: left;
vertical-align: top;
margin: -180px 0px 0px 40px;
}

.Bubble {
width=100%;
height: 200px;
border-radius: 200px;
}

.Obrazky-skoly {
width: 25%;
border-radius: 30px;
border: 4px #E2EEE7 solid;
box-shadow: 0px 0px 20px -2px rgba(0, 0, 0, 0.9);
float: right;
margin: -150px 30px 0px 0px;
}

.MalyNadpis {
font-size: 40px;
margin: 5px auto;
color: #F6EAEA;
text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4);
}

.MalyPopis {
text-align: center;
width: 35%;
font-size: 20px;
margin: 5px auto;
color: #F6EAEA;

}

.Chemie {
background-color: #67C170;
border: 10px #4DD672 solid;
box-shadow: inset 0px 0px 50px -2px rgba(0, 0, 0, 0.6), 0px 0px 30px 0px 
rgba(0, 0, 0, 0.3);
}

<div class="bubble-content">
    <div class="Chemie Bubble">
        <p class="MalyNadpis"> Title  </p>
        <p class="MalyPopis"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis bibendum o saeoni fea  gea geasdgea gfea nso einaos safse fda </p>
        <img class="MaleLogo" src="http://via.placeholder.com/50x50" alt="Logo Chemie">
        <img class="Obrazky-skoly" src="http://via.placeholder.com/100x50">
    </div>
</div>

Answer 1

您在气泡上设置了固定宽度，因此它永远不会缩小或增大。您需要气泡能够随着屏幕的增大而变大或变小。我将您的气泡样式更改为其内部元素宽度的 100%。我还将它更改为显示为 flexbox，并将您的文本包裹在 div 内的气泡中，以便它可以根据 flexbox 进行缩放。

<div class="bubble-content">
<div class="Chemie Bubble">
    <img class="MaleLogo" src="http://via.placeholder.com/50x50" alt="Logo Chemie">
    <div class="Bubble__Text">
       <p class="MalyNadpis"> Title  </p>
       <p class="MalyPopis"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis bibendum o saeoni fea  gea geasdgea gfea nso einaos safse fda </p>
    </div>

    <img class="Obrazky-skoly" src="http://via.placeholder.com/100x50">
</div>

body {
width: 100%;
height: 100%;
margin:0;    
}

.bubble-content {
width: 100%
margin: auto;
text-align: center;
}
.Chemie {
background-color: #67C170;
border: 10px #4DD672 solid;
box-shadow: inset 0px 0px 50px -2px rgba(0, 0, 0, 0.6), 0px 0px 30px     0px 
rgba(0, 0, 0, 0.3);
}

.Bubble {
width: 100%;
height: 200px;
border-radius: 200px;
display: flex;
padding: 0 80px;
}
.Bubble img {
  align-self: center
}
.Bubble__Text {
  margin: 0 25px;
}
.Obrazky-skoly {
border-radius: 30px;
border: 4px #E2EEE7 solid;
    box-shadow: 0px 0px 20px -2px rgba(0, 0, 0, 0.9);

}
.MalyNadpis {
font-size: 40px;
margin: 5px auto;
color: #F6EAEA;
text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4);
}
.MalyPopis {
text-align: center;
font-size: 20px;
margin: 5px auto;
color: #F6EAEA;
}