浏览器调整大小时如何保持两个图像并排？答案

【问题标题】：How to keep two images side by side when browser resizes?浏览器调整大小时如何保持两个图像并排？
【发布时间】：2015-07-10 14:37:40
【问题描述】：

我遇到了一些麻烦。我有两个并排的图像，当我的浏览器窗口调整大小（缩小）时，我希望它们始终并排保持在同一行。

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

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

一个sn-p中的所有代码：

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>

【问题讨论】：

哪两张图片？你试过设置min-width吗？
dkpic 和 srpic，不，我没有我需要将 min-width 设置为什么？如果您单击 jfiddle 并稍微调整宽度，您将看到图像从并排变为左上角和右下角的图像

标签： html css image resize

【解决方案1】：

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

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

应该这样做

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

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

干杯

【讨论】：

【解决方案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 类行。 ;)

【讨论】：

【解决方案3】：

对图像 class="img-responsive" 使用引导类

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

【讨论】：

【解决方案4】：

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

将 max-width 45% 替换为 width 45% 将纠正当前的情况。

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

【讨论】：