Question

当最小化窗口时，我希望所有div都叠加在一起。现在，img中的col-md-6缩小到大小，当窗口最小化时，它们周围似乎是padding。我更改了img的哪些属性，以便当窗口缩小时img缩小，但不包括它周围的空白区域，同时还要叠加在另一个上面？我还希望.header h1能够叠加在.header .nav之上。我最初的假设是编辑每个div的position，但这并不是很有效。

另外，有没有办法操纵col-md-6，这样它的宽度足以缩小每个之间的间隙，同时还能保持左右两侧的均匀度？

第一个img是窗口最大化的时候;第二个是img被最小化的时候。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Merriweather|Europa">

</head>
<body>

<div class = "header">
<div class = "container-fluid">
<h1 id = "firstName">Header</h1>
<div class = "nav">
<a href="#">About</a>
<a href="#">Work</a>
<a href="#">Photo</a>
<a href="#">Blog</a>
</div>
</div>
</div>

<div class="container-fluid">
<h1 id = "text">Text.</h1>
<div class = "col-md-6">
<div class="wrapper">
<img src="img/photo-top.jpg"/>
</div>
</div>

<div class = "col-md-6">
<div class="wrapper">
<img src="img/photo-top.jpg"/>
</div>
</div>
<div class = "col-md-6">
<div class="wrapper">
<img src="img/photo-top.jpg"/>
</div>
</div>

<div class = "col-md-6">
<div class="wrapper">
<img src="img/photo-top.jpg"/>
</div>
</div>

</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/main.js"></script>

html, body {
font-family:;
margin:0 auto;
padding:10px;
text-transform: none;
font-family: europa;
font-weight: 400;
font-style: normal;
line-height: 1.3em;
letter-spacing: 0em;
text-transform: none;
color: #000;
}

.header h1 {
  background-color: ;
  margin: 50px;
  display: inline-block;
  font-size: 15px;
  letter-spacing: 0.8px;
}

.header .nav {
  float: right;
  display: inline-block;
  margin:50px;
  padding:0;
  font-size: 15px;
  letter-spacing: 0.8px;
}

.header .nav a {
  font-family: Europa;
  color:black;
  padding:15px;
  text-decoration: none;
}
.row {
  margin: 0 auto;
  display: inline-block;
}
.container-fluid {
  padding:;
  margin:0 auto;
}

#text {
  padding-left: 50px;
  font-family: europa;
  font-weight: 400;
  font-style: normal;
  font-size: 3em;
  line-height: 1.3em;
  letter-spacing: 0em;
  text-transform: none;
  color: #000;
  width: 50%;
}
.col-md-6 {
  margin: 0 auto;
  width: 50%;
  float: left;
  text-align:center;
  padding-top: 50px;
  padding-right: 50px;
  padding-left:50px;
}

.col-md-6 .wrapper {
  padding: 0;
  border: 0px solid black;
}

.col-md-6 .wrapper img {
  max-width:100%;
  max-height:100%;
}


  [1]: https://i.stack.imgur.com/29Aaj.png

Answer 1

在调整窗口大小时，您是否尝试使用媒体查询来操纵元素的位置。

例如

@media screen and (max-width: 768px) {
    div{
       float:left;
      }
}

这意味着当窗口大小达到768px时，目标元素将开始表现，就像您通过媒体查询告诉它们一样。

在最小化窗口时，如何让divs叠加在一起？

1 个答案: