html - HTML5/CSS3 - 左边距问题
问题描述
我在这里遇到问题,我找不到我做错了什么。我想了解为什么我不能在“Bruna Diniz”帖子上应用“margin-left”,在我应用了一个名为“post__box”的类的部分中,它有一个“margin-left:20px”属性,我试图覆盖它带有“margin-left:40px”类,但它不起作用,如果我将这个类应用到一个包含所有子元素的 div 中,它的工作方式就不一样了,我的意思是,我想移动整个部分向左而不影响/减小它的内部子元素大小,你知道吗?
感谢您从现在 <3 开始的所有耐心 - 以及下面的评论/警告,对此感到抱歉(:
正在发生的事情的图像:
最后是我的 HTML5(重要部分!!!!)代码:
<!-- bruna diniz -->
<section class="posts__box posts__box--left -margin-left-40px">
<div class="-margin-top-47px">
<div class="box--text -font-left">
<a class="--hover" href="revista\artistas\bruna-diniz.html">
<p class="-font-black -font-source -font--text-big">corpo estrangeiro sem imagem<br>
um espelho vazio que não sou capaz de ver e já não sei se um dia verei<br>
se quer serei capaz de pintar algum rosto que imagino ser o meu<br>
qualquer imagem que nos dissesse sobre aquele fio de navalha<br>
pelo qual percorri e ainda percorrerei<br>
imagine só o que serão nossos filhos<br>
nossas filhas<br>
que ainda não são frutos<br>
e se forem algum, de quais flores irão nascer? (...)</p>
</a>
</div>
<div class="box--author box--btn box--btn--black">
<a class="--hover" href="revista\artistas\bruna-diniz.html">
<h4 class="box--author--text author--white -font--small --hover--dimgray">Bruna Diniz</h4>
</a>
</div>
<div class="box--continue box--btn box--btn--red">
<a class="--hover" href="revista\artistas\bruna-diniz.html">
<h5 class="box--continue--text continue--white -font--tiny --hover--dimgray">CONTINUAR A LEITURA</h5>
</a>
</div>
</div>
</section>
我的 CSS3 代码:
/* BLOCKS */
/* posts */
.box--btn {
margin-top: 10px;
border: 1.5px solid black;
box-shadow: 2px 2px 2px dimgray;
}
.posts__box {
margin-top: 40px;
margin-left: 20px;
width: 30%;
}
.box--title {
text-align: center;
}
.box--img {
width: 100%;
box-shadow: 3px 3px 3px Dimgray;
}
.box--text {
padding: 5px;
}
.box--author {
float: right;
width: 46%;
height: 50px;
}
.box--author--text {
margin-top: 10px;
margin-left: 6px;
}
.box--continue {
float: left;
width: 46%;
height: 50px;
}
.box--continue--text {
margin-top: 12px;
margin-left: 7px;
}
.posts__btns {
float: left;
margin-top: 20px;
width: 100%;
height: 200px;
}
/* MODIFIERS */
.revista__posts--height {
height: 3000px;
}
/* posts */
.title--red {
color: rgba(233, 26, 26, 1);
}
.title--size-small {
font-size: 30px;
text-shadow: 1.5px 1.5px black;
}
.title--size-large {
font-size: 60px;
text-shadow: 3px 3px black;
}
.box--btn--red {
background: rgba(233, 26, 26, 1);
}
.continue--white {
color: #ffffff;
text-shadow: 1.5px 1.5px black;
}
.box--btn--black {
background: #212121;
}
.author--white {
color: #ffffff;
text-shadow: 2px 2px black;
}
.posts__box--left {
float: left;
}
.posts__box--right {
float: right;
}
.posts__box--margin--fix--left {
margin-top: 10px;
margin-left: 40px;
}
.posts__box--margin--fix--top {
margin-top: 34px;
margin-left: 40px;
}
.posts__btns--left {
float: left;
margin-left: 20px;
}
.posts__btns--right {
float: right;
margin-right: 20px;
}
/* revista */
.revista__container--height {
height: 4800px;
}
解决方案
你还没有为这个类'-margin-left-40px'定义css。请在css中添加以下代码,希望对您有所帮助
.-margin-left-40px {
margin-left:40px;
}
如果它没有覆盖 css,那么您可以使用 !important ,如下面的代码:
.-margin-left-40px {
margin-left:40px !important;
}
推荐阅读
- elasticsearch - 无法锁定 JVM 内存:错误=12,原因=无法分配内存 - Elasticsearch 6.2.4
- delphi - 程序终止后的 Delphi 任务和线程
- canvas - 如何将图像从一个织物画布复制到另一个大织物画布的一部分?
- spring-data - 订阅长时间运行的异步查询
- javascript - 将 HTML 表映射到 JSON 数组
- java - Without creating ZIP file on server (hard disk) how to let client download a ZIP file with custom selected files?
- angularjs - Accessing array inside routeConfig
- key - What if I chosen already existing bitcoin address?
- python - 在 DataFrame Pandas 上应用应用时获取 SettingWithCopyWarning
- gitlab - Gitlab Wiki markdown 是否支持从 CSV 文件中提取的“每日报价”生成器?