Question

我遇到了一些麻烦。我有两个并排的图像，当我的浏览器窗口调整大小（收缩）时，我希望它们能够并排在同一条线上。

发生的事情是，其中一个图像被按下。我已将这两个图像放在<figure>中并将图形设置为max-width，但这不起作用。有什么帮助吗？

这是JSFiddle：https://jsfiddle.net/srebne/ru9fmudr/

一个代码段中的所有代码：

nav ul li a:hover,
nav ul li.active a {
  border: 2px solid #dad9d8;
}
nav {
  margin: 0 0 1em;
  font-family: Helvetica, Arial, sans-serif;
  display: flex;
  flex-wrap: no-wrap;
  justify-content: center;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 0.3em;
  color: black;
  text-align: center;
  text-decoration: none;
  background-color: #ffae00;
  background: -webkit-linear-gradient(top, #ffae00, #d67600);
  background: -moz-linear-gradient(top, #ffae00, #d67600);
  background: -o-linear-gradient(top, #ffae00, #d67600);
  background: linear-gradient(top, #ffae00, #d67600);
  border: 2px outset #dad9d8;
  font-family: Andika, Arial, sans-serif;
  letter-spacing: 0.05em;
  color: #fff;
  text-shadow: 0px 1px 10px #000;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -webkit-box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
  -moz-box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
  box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
}
body {
  font-family: Rockwell, “Courier Bold”, Courier, Georgia, Times, “Times New Roman”, serif;
}
html {
  background: url(babybluebackgroundwallpaper.jpg) no-repeat center center fixed;
  background-size: cover;
  /*background-color: #D6EBFF*/
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #D6AD33;
  font-size: 40px;
}
#imgbox {
  display: flex;
  justify-content: center;
}
#logoimg {
  width: 300px;
  height: 100px;
}
#dkpic,
#srpic {
  border: solid 3px #D6AD33;
  max-width: 100%;
}
.teampic1 {
  float: left;
  max-width: 45%;
}
.teampic2 {
  float: right;
  max-width: 45%;
}
#aboutus {
  font-size: 30px;
}
#ourteam {
  font-size: 30px;
}
@media only screen and (min-width: 700px) {
  #philo {
    width: 50%;
    float: left;
    clear: left;
  }
  #team {
    width: 50%;
    float: right;
  }
}
@media only screen and (min-width: 1000px) {
  .teampic1 {
    max-width: 30%;
  }
  .teampic2 {
    max-width: 30%;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="description" content="About Us">
  <title>FoodList About Us</title>
</head>

<body>
  <div id="imgbox">
    <img id="logoimg" src="logo.jpg" alt="foodlist logo">
  </div>
  <br>
  <nav>
    <ul>
      <li>
        <a href="index.html">Home</a>
      </li>
      <li>
        <a href="about.html">About</a>
      </li>
      <li>
        <a href="contact.html">Contact</a>
      </li>
    </ul>
  </nav>

  <div id="philo">
    <h2>Our Philosophy</h2>
    <p id="aboutus">At FoodList our mission is simple. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
  </div>
  <div id="team">
    <h2>Meet Our Team</h2>
    <figure class="teampic1">
      <img id="dkpic" src="davidko.jpg" alt="dk's picture">
      <figcaption>Dvzzn Xi</figcaption>
    </figure>
    <figure class="teampic2">
      <img id="srpic" src="srebne.png" alt="s's picture">
      <figcaption>Sgfkfk Rkesn</figcaption>
    </figure>
    <p id="ourteam"></p>
  </div>
</body>

</html>

Answer 1

在两个图形元素上使用此样式：

display: inline-block;
width: 45%;
margin: 1%; //or more just play with it a little
vertical-align: top;

这应该

编辑：看看这个小提琴https://jsfiddle.net/ru9fmudr/4/

浏览器自动将起始边距和结束边距等设置为40px，这就是为什么当你缩小45％宽度* 2 = 90％并且浏览器边距将远远超过10％时这就是为什么它没有工作

干杯

Answer 2

您正在尝试并保持清洁的一种方法如下：

CSS

.line {
    width: 100%;
    box-sizing: border-box;
}
.line figure {
     width: 45%;
     margin: 0;
     display: inline-block;
}
.line figure:first-child {
     margin-right: 10px; 
}

<div id="team">
     <h2>Meet Our Team</h2>

    <div class="line">
        <figure>
            <img id="dkpic" src="davidko.jpg" alt="dk's picture">
            <figcaption>Dvzzn Xi</figcaption>
        </figure>
        <figure>
            <img id="srpic" src="srebne.png" alt="s's picture">
            <figcaption>Sgfkfk Rkesn</figcaption>
        </figure>
    </div>
    <p id="ourteam"></p>
</div>

对于每张包含两张图片的新行，打开一个新的div类行。 ;）

Answer 3

使用bootstrap类进行image class =“img-responsive”

<img class="img-responsive" align="right" width="600" height="300" src="~/Images/someimage.jpg" alt="some text" hspace="25" vspace="25" />

Answer 4

如果您要完成的最终目标是将两个元素并排放置，则需要设置精确的宽度。目前在您的代码中，.teampic1和.teampic2类的最大宽度为45％。这意味着如果强制它们的尺寸小于父元素的45％，它们可以（并且将会）收缩小于45％。

以45％的宽度替换最大宽度45％将纠正当前情况。

如果没有正确清除浮动元素，您还会遇到其他潜在问题，但这完全是另一个问题。

浏览器调整大小时如何并排保留两张图片？

4 个答案: