Question

我写了这段代码：

<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;

}

请帮帮我它是引导链接吗？如何制作它以便没有空格？

Answer 1

您的更新容器css后正在加载您的bootstrap CSS。将自定义CSS移到bootstrap css下面。

bootstrap“container”类正在覆盖你的。

它应该是这样的：

<head>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <style>
  .container {}
  </style>

  </head>

Answer 2

您是否在页面中包含了引导程序？如果是，则不需要重写容器类。如果你想扩大容器，你可以简单地写

.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; }

以全宽高度实现图像并向左对齐。希望答案能帮到你。

如何对齐图像

2 个答案: