html 如何修复此图像内列，并有20像素的利润率从顶部，左，右？

t5fffqht 于 12个月前发布在其他

关注(0)|答案(3)|浏览(97)

我有这三列，我希望在每列的图像，并为这个图像采取20 px的利润率从顶部，左，右。margin-right规则是没有影响的图像，margin-left使它向右移动，并重叠其他列。

HTML
<div class="row">
  <div class="column">
  <p class="title">News</p>
  <img src="https://circleyoga.com/wp-content/uploads/2023/12/Gift-Box-v2-500x300-1.jpg" alt="">
</div>

CSS 
.row{
 display: flex;
 max-width: 1060px;
 align-items: center;
 justify-content: center;
 margin: 0 auto;
 margin-top: 30px;
 box-sizing: border-box;
}
.column{
 display: inline-block;
 min-height: 500px;
 width: 33.33%;
 border: 5px solid #F8F8F8;
 box-sizing: border-box;
}

.title{
 font-family: 'Nunito Sans', sans-serif;
 font-size: 30px;
 font-weight: 100;
 border-left-style: solid;
 border-left-width: 5px;
 border-color: #d54126;
 padding-left: 13px;
 margin: 10px 0px;
}

.column img{
 display: block;
 max-width: 100%;
 height: auto;
 margin: 20px 20px 0 20px;
}

字符串

Html

来源：https://stackoverflow.com/questions/77716422/how-to-fix-this-image-inside-column-and-have-20px-margin-from-top-left-and-righ

3条答案

按热度按时间

myss37ts1#

.row {
  display: flex;
  max-width: 1060px;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  margin-top: 30px;
  box-sizing: border-box;
}

.column {
  display: inline-block;
  min-height: 500px;
  width: 33.33%;
  border: 5px solid #F8F8F8;
  box-sizing: border-box;
}

.title {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 30px;
  font-weight: 100;
  border-left-style: solid;
  border-left-width: 5px;
  border-color: #d54126;
  padding-left: 13px;
  margin: 10px 0px;
}

.column img {
  display: block;
  max-width: calc(100% - 40px); /* 20px left margin + 20px right margin */
  height: auto;
  margin: 20px 20px 0 20px;
  box-sizing: border-box;
}

个字符
此问题可能与.column img样式中的max-width：100%;属性有关。当图像处于其最大宽度时，添加右边距可能不会产生可见效果。若要解决此问题，您可以将图像的box-sizing属性设置为border-box，并调整width属性以适应边距。
以下是CSS的更新版本：

.row {
  display: flex;
  max-width: 1060px;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  margin-top: 30px;
  box-sizing: border-box;
}

.column {
  display: inline-block;
  min-height: 500px;
  width: 33.33%;
  border: 5px solid #F8F8F8;
  box-sizing: border-box;
}

.title {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 30px;
  font-weight: 100;
  border-left-style: solid;
  border-left-width: 5px;
  border-color: #d54126;
  padding-left: 13px;
  margin: 10px 0px;
}

.column img {
  display: block;
  max-width: calc(100% - 40px); /* 20px left margin + 20px right margin */
  height: auto;
  margin: 20px 20px 0 20px;
  box-sizing: border-box;
}

型

赞(0）回复(0）举报 12个月前

sf6xfgos2#

这看起来像是你在.row类上使用display：flex属性来创建一个flex容器，然后在.column类上使用display：inline-block。这种组合可能会导致布局出现一些问题。相反，你可以在.column类上使用flex：1来使每个列在flex容器中占据相等的宽度。此外，你可以使用box-sizing：border-box属性将填充和边框包含在元素的总宽度和高度中。

.row {
 display: flex;
 max-width: 1060px;
 align-items: center;
 justify-content: center;
 margin: 0 auto;
 margin-top: 30px;
 box-sizing: border-box;
}

.column {
 flex: 1;
 border: 5px solid #F8F8F8;
 box-sizing: border-box;
}

.title {
 font-family: 'Nunito Sans', sans-serif;
 font-size: 30px;
 font-weight: 100;
 border-left-style: solid;
 border-left-width: 5px;
 border-color: #d54126;
 padding-left: 13px;
 margin: 10px 0px;
}

.column img {
 display: block;
 max-width: 100%;
 height: auto;
 margin: 20px;
}

字符串

赞(0）回复(0）举报 12个月前

bhmjp9jg3#

你必须改变img CSS类中的max-width为：
max-width：-webkit-fill-available;

赞(0）回复(0）举报 12个月前