我遇到了一个小问题。我正在设计一个3个圆柱区域，每个区域都有图像和文本。缩放网站时，图像不会在一条线上反弹，文本也不会保留图像边缘 - 仅在左侧。
这似乎是一个简单的修复，但我花了最后两个小时搞乱CSS元素，我似乎无法弄清楚问题。
我应该注意到这个＆＃34;响应能力＆＃34;只有HTML和CSS才能实现百分比。
非常感谢任何帮助！
我当前的CSS：
#popularprebuilt {
padding: 0;
margin: 0;
}
#popularprebuilt .title {
text-align: center;
padding: 46px 0 40px 0;
}
#popularprebuilt .precolumn {
float: left;
width: 33%;
text-align: inherit;
padding: 0 20px 20px 0;
}
#popularprebuilt .precolumn_b {
float: inherit;
width: auto;
text-align: center;
text-transform: uppercase;
padding: 0 0 46px 0;
}
#popularprebuilt .precolumn .pretitle {
float: left;
width: 33%;
text-align: justify;
font-size: 12px;
font-weight: 600;
letter-spacing: 0;
text-transform: capitalize;
}
#popularprebuilt .precolumn .preprice {
float: right;
text-align: justify;
font-size: 12px;
letter-spacing: 0;
}
我当前的HTML：
<section id="popularprebuilt">
<div class="container">
<div class="title">
<h1>Popular Prebuilt Packages</h1>
</div>
<div class="precolumn">
<a href="">
<img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
</a>
<p class="pretitle">low line glow</p>
<p class="preprice">$9.99</p>
</div>
<div class="precolumn">
<a href="">
<img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
</a>
<p class="pretitle">sunshine</p>
<p class="preprice">$9.99</p>
</div>
<div class="precolumn">
<a href="">
<img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
</a>
<p class="pretitle">top heavy</p>
<p class="preprice">$9.99</p>
</div>
<div class="precolumn">
<a href="">
<img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
</a>
<p class="pretitle">simply flat</p>
<p class="preprice">$9.99</p>
</div>
<div class="precolumn">
<a href="">
<img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
</a>
<p class="pretitle">forty-five</p>
<p class="preprice">$9.99</p>
</div>
<div class="precolumn">
<a href="">
<img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
</a>
<p class="pretitle">right aligned</p>
<p class="preprice">$9.99</p>
</div>
<!--Popular Prebuilt Packages Buttons-->
<div class="precolumn_b">
<button class="button_2"><span>Browse all grpahics</span </button>
<button class="button_3"><span>I want a custom design</span </button>
</div>
</div>
</section>
示例：
#popularprebuilt {
padding: 0;
margin: 0;
}
#popularprebuilt .title {
text-align: center;
padding: 46px 0 40px 0;
}
#popularprebuilt .precolumn {
float: left;
width: 33%;
text-align: inherit;
padding: 0 20px 20px 0;
}
#popularprebuilt .precolumn_b {
float: inherit;
width: auto;
text-align: center;
text-transform: uppercase;
padding: 0 0 46px 0;
}
#popularprebuilt .precolumn .pretitle {
float: left;
width: 33%;
text-align: justify;
font-size: 12px;
font-weight: 600;
letter-spacing: 0;
text-transform: capitalize;
}
#popularprebuilt .precolumn .preprice {
float: right;
text-align: justify;
font-size: 12px;
letter-spacing: 0;
}<section id="popularprebuilt">
<div class="container">
<div class="title">
<h1>Popular Prebuilt Packages</h1>
</div>
<div class="precolumn">
<a href="">
<img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
</a>
<p class="pretitle">low line glow</p>
<p class="preprice">$9.99</p>
</div>
<div class="precolumn">
<a href="">
<img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
</a>
<p class="pretitle">sunshine</p>
<p class="preprice">$9.99</p>
</div>
<div class="precolumn">
<a href="">
<img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
</a>
<p class="pretitle">top heavy</p>
<p class="preprice">$9.99</p>
</div>
<div class="precolumn">
<a href="">
<img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
</a>
<p class="pretitle">simply flat</p>
<p class="preprice">$9.99</p>
</div>
<div class="precolumn">
<a href="">
<img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
</a>
<p class="pretitle">forty-five</p>
<p class="preprice">$9.99</p>
</div>
<div class="precolumn">
<a href="">
<img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
</a>
<p class="pretitle">right aligned</p>
<p class="preprice">$9.99</p>
</div>
<!--Popular Prebuilt Packages Buttons-->
<div class="precolumn_b">
<button class="button_2"><span>Browse all grpahics</span </button>
<button class="button_3"><span>I want a custom design</span </button>
</div>
</div>
</section>
答案 0 :(得分：0)
我建议你在这篇文章中看到我的答案： How to Make Navigation Buttons Mobile-Responsive and Collapse in Order?
在那里，我解释了为什么有时我们的代码在缩放或调整屏幕大小时没有按照我的预期行事。
在阅读完答案后，您将能够理解并找出您所写的代码中的错误：
1）说.precolumn宽度比内部图像短，因为你说：<img src="./img/low-line-glow.jpg" height="230" width="390"> （width =＆＃34; 390＆＃34;）< / EM>
#popularprebuilt .precolumn .pretitle {
float: left;
width: 33%;
text-align: justify;
font-size: 12px;
font-weight: 600;
letter-spacing: 0;
text-transform: capitalize;
}
如果你修复它，并且你在CSS中学习了如何创建 自然顺序 ，那么你将弄清楚如何制作很多东西没有＆＃34;意外行为的CSS＆＃34;
在您的情况下，即使您按照我的回答修复它也无法工作，因为您还需要学习并使用display:flex;来制作真正响应的设计。
答案 1 :(得分：0)
为了在父级div变小时自行调整图片大小，您需要将以下内容添加到
中img{
max-width:100%;
height:auto;
}
<强>解释
通过使用max-width:100%，您告诉所有图像在父div上伸展100％，但不会比原始图像本身拉伸得更大。随着宽度变得拉伸，您需要height:auto自动调整自己，以便您的图像按比例调整大小而不会挤压....
示例：
img{
max-width:100%;
height:auto;
}
#popularprebuilt {
padding: 0;
margin: 0;
}
#popularprebuilt .title {
text-align: center;
padding: 46px 0 40px 0;
}
#popularprebuilt .precolumn {
float: left;
width: 33%;
text-align: inherit;
padding: 0 20px 20px 0;
}
#popularprebuilt .precolumn_b {
float: inherit;
width: auto;
text-align: center;
text-transform: uppercase;
padding: 0 0 46px 0;
}
#popularprebuilt .precolumn .pretitle {
float: left;
width: 33%;
text-align: justify;
font-size: 12px;
font-weight: 600;
letter-spacing: 0;
text-transform: capitalize;
}
#popularprebuilt .precolumn .preprice {
float: right;
text-align: justify;
font-size: 12px;
letter-spacing: 0;
}<section id="popularprebuilt">
<div class="container">
<div class="title">
<h1>Popular Prebuilt Packages</h1>
</div>
<div class="precolumn">
<a href="">
<img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
</a>
<p class="pretitle">low line glow</p>
<p class="preprice">$9.99</p>
</div>
<div class="precolumn">
<a href="">
<img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
</a>
<p class="pretitle">sunshine</p>
<p class="preprice">$9.99</p>
</div>
<div class="precolumn">
<a href="">
<img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
</a>
<p class="pretitle">top heavy</p>
<p class="preprice">$9.99</p>
</div>
<div class="precolumn">
<a href="">
<img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
</a>
<p class="pretitle">simply flat</p>
<p class="preprice">$9.99</p>
</div>
<div class="precolumn">
<a href="">
<img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
</a>
<p class="pretitle">forty-five</p>
<p class="preprice">$9.99</p>
</div>
<div class="precolumn">
<a href="">
<img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
</a>
<p class="pretitle">right aligned</p>
<p class="preprice">$9.99</p>
</div>
<!--Popular Prebuilt Packages Buttons-->
<div class="precolumn_b">
<button class="button_2"><span>Browse all grpahics</span </button>
<button class="button_3"><span>I want a custom design</span </button>
</div>
</div>
</section>
其他
以上示例将遇到问题，其中div不会正确对齐并且在一侧导致空白，这是因为在每个div元素上的文本长度不同。要解决此问题，您可以参考以下解决方案。
HTML修复：
将class="title"移到class="container"
自：
<div class="container">
<div class="title">
<h1>Popular Prebuilt Packages</h1>
</div>
.......
</div>
到：
<div class="title">
<h1>Popular Prebuilt Packages</h1>
</div>
<div class="container">
.......
</div>
CSS修复：
#popularprebuilt .precolumn:nth-child(2n+1){
clear:both;
}
<强>解释
您需要移开class="title"，以便可以定位每个1,3,5,7 ......元素。添加clear:both;将强制div被清除并降落在每个div下方。
示例：
img {
max-width: 100%;
height: auto;
}
#popularprebuilt .precolumn:nth-child(2n + 1) {
clear: both;
}
#popularprebuilt {
padding: 0;
margin: 0;
}
#popularprebuilt .title {
text-align: center;
padding: 46px 0 40px 0;
}
#popularprebuilt .precolumn {
float: left;
width: 33%;
text-align: inherit;
padding: 0 20px 20px 0;
}
#popularprebuilt .precolumn_b {
float: inherit;
width: auto;
text-align: center;
text-transform: uppercase;
padding: 0 0 46px 0;
}
#popularprebuilt .precolumn .pretitle {
float: left;
width: 33%;
text-align: justify;
font-size: 12px;
font-weight: 600;
letter-spacing: 0;
text-transform: capitalize;
}
#popularprebuilt .precolumn .preprice {
float: right;
text-align: justify;
font-size: 12px;
letter-spacing: 0;
}<section id="popularprebuilt">
<div class="title">
<h1>Popular Prebuilt Packages</h1>
</div>
<div class="container">
<div class="precolumn">
<a href="">
<img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
</a>
<p class="pretitle">low line glow</p>
<p class="preprice">$9.99</p>
</div>
<div class="precolumn">
<a href="">
<img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
</a>
<p class="pretitle">sunshine</p>
<p class="preprice">$9.99</p>
</div>
<div class="precolumn">
<a href="">
<img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
</a>
<p class="pretitle">top heavy</p>
<p class="preprice">$9.99</p>
</div>
<div class="precolumn">
<a href="">
<img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
</a>
<p class="pretitle">simply flat</p>
<p class="preprice">$9.99</p>
</div>
<div class="precolumn">
<a href="">
<img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
</a>
<p class="pretitle">forty-five</p>
<p class="preprice">$9.99</p>
</div>
<div class="precolumn">
<a href="">
<img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
</a>
<p class="pretitle">right aligned</p>
<p class="preprice">$9.99</p>
</div>
<!--Popular Prebuilt Packages Buttons-->
<div class="precolumn_b">
<button class="button_2"><span>Browse all grpahics</span </button>
<button class="button_3"><span>I want a custom design</span </button>
</div>
</div>
</section>
答案 2 :(得分：0)
首先关闭夫妻：
媒体查询： 尝试在断点中使用媒体查询
图片：将图片宽度设置为100％到其父容器，而不是固定宽度。
填充：您应该计算容器的填充和边距。在您的代码中，您将容器除以3，但是您的填充为20px，这是重叠的。
这是您修改后的代码：
<强> CSS：
#popularprebuilt {
padding: 0;
margin: 0;
}
#popularprebuilt .title {
text-align: center;
padding: 46px 0 40px 0;
}
#popularprebuilt .precolumn {
float: left;
width: 29.3333%;
text-align: inherit;
padding:0 2%;
}
#popularprebuilt .precolumn img{
width:100%;
}
#popularprebuilt .precolumn_b {
float: inherit;
width: auto;
text-align: center;
text-transform: uppercase;
padding: 0 0 46px 0;
}
#popularprebuilt .precolumn .pretitle {
float: left;
text-align: justify;
font-size: 12px;
font-weight: 600;
letter-spacing: 0;
text-transform: capitalize;
}
#popularprebuilt .precolumn .preprice {
float: right;
text-align: justify;
font-size: 12px;
letter-spacing: 0;
}
@media all and (max-width:1000px){
#popularprebuilt .precolumn {
float: left;
width: 46%;
text-align: inherit;
padding:0 2%;
}
}
@media all and (max-width:600px){
#popularprebuilt .precolumn {
float: left;
width: 96%;
text-align: inherit;
padding:0 2%;
}
}
<强> HTML：
<section id="popularprebuilt">
<div class="container">
<div class="title">
<h1>Popular Prebuilt Packages</h1>
</div>
<div class="precolumn">
<a href="">
<img src="https://via.placeholder.com/350x150" />
</a>
<p class="pretitle">low line glow</p>
<p class="preprice">$9.99</p>
</div>
<div class="precolumn">
<a href="">
<img src="https://via.placeholder.com/350x150" />
</a>
<p class="pretitle">sunshine</p>
<p class="preprice">$9.99</p>
</div>
<div class="precolumn">
<a href="">
<img src="https://via.placeholder.com/350x150" />
</a>
<p class="pretitle">top heavy</p>
<p class="preprice">$9.99</p>
</div>
<div class="precolumn">
<a href="">
<img src="https://via.placeholder.com/350x150" />
</a>
<p class="pretitle">forty-five</p>
<p class="preprice">$9.99</p>
</div>
<!--Popular Prebuilt Packages Buttons-->
<div class="precolumn_b">
<button class="button_2"><span>Browse all grpahics</span>
</button>
<button class="button_3"><span>I want a custom design</span>
</button>
</div>
</div>
</section>
Check this JsFiddle.。这是一项完整的工作。
希望它有所帮助。