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

您在气泡上放置固定宽度，使其永不缩小或增长。随着屏幕的增长，您需要泡泡能够变大或变小。我将您的Bubble样式更改为其内部元素宽度的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;
}

如何将内容放入框中并使其具有响应性？

1 个答案: