我写了这段代码:
<section class="termine">
<div class="container">
<img class="img" src="https://www.buildinglogix.net/wp-
content/uploads/2017/01/BLX_Homepage-Banner.jpeg"
alt="image building">
</div>
<h1 class="text1">Chi sono</h1>
</section>
和这个 CSS:
.termine {
float:left;
display: block;
align:left;
width:100%;
width:100%;
position:absolute;
margin: 0; padding: 0; border: 0; outline: 0;}
.container {
display: block;
align:left;
width: 1290px;
padding: 0px 0px 0px 0px;
float: left;
}
.img {
display: block;
align:left;
width:1290px;
padding: 0px 0px 0px 0px;
border: 0;
margin: 0;
outline: 0;
float: left;
text-align: left;
}
请帮助我
是引导链接与它之间的恐惧吗? 如何使它没有空白?
您的引导 CSS 是在更新容器 CSS 之后加载的。将您的自定义 css 移动到引导 css 下方。
引导程序"容器"类正在覆盖你的类。
它应该看起来像这样:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.container {}
</style>
</head>
您是否在页面中包含引导程序?如果是,则无需重写其中的容器类。仍然如果你想扩大容器,你可以简单地写
.container { width: 1290px; }
编写的代码中的align:left
不起作用,也不是必需的。使用属性时无需编写align:left
float
。 不仅如此,默认情况下,图像仅与左侧对齐。我不明白您是否在"termine"div 中使用position:absolute
,而您只想在容器内显示图像。
只需编写 HTML:
<div class="container">
<img src="https://www.buildinglogix.net/wp-content/uploads/2017/01/BLX_Homepage-Banner.jpeg" alt="img">
</div>
然后在 CSS 中
*, body { margin:0; padding: 0;}
.container { width: 1290px;}
.container img { width:100%; height:100%; vertical-align: top; }
以实现全宽高度的图像并向左对齐。 希望答案对您有所帮助。