如果不是孩子，如何不让元素刹车

Question

即使窗口宽度非常小，我也想将.quote-container 和#new-quote 元素放在同一行中。例如 83 像素。在.quote-container 元素上使用min-width 有效，但是，在#new-quote 元素上使用相同的技术无效。

也许那是因为#new-quote 不是.quote-container 的孩子？我什至试图让它成为一个孩子，它更糟糕（图片是在桌面窗口大小上拍摄的）：

我想在视觉上实现的目标：

var getNewQuote = function(callback) {
  var quote = {};

  quote.text = 'Example';
  quote.author = 'Example';
  $(".loading").hide();
  callback(quote);

};
var quoteContainerStartingPadding,
  quoteContainerEndingPadding,
  newQuoteEndingPadding;
if ($(window).width() > 648) {
  quoteContainerStartingPadding = "0 2.5rem";
  quoteContainerEndingPadding = "2.5rem";
  newQuoteEndingPadding = "2.5rem .75rem";
} else {
  quoteContainerStartingPadding = "0 1.5em";
  quoteContainerEndingPadding = "1.5rem";
  newQuoteEndingPadding = "1.5rem .75rem";
}

$(".quote-container").css("padding", quoteContainerStartingPadding);
getNewQuote(function(quote) {
    var getRandomColor = function() {
      var colors = ["#ff9966", "#7f00ff", "#396afc", "#0cebeb", "#06beb6", "#642b73", "#36d1dc", "#cb356b", "#3a1c71", "#ef3b36", "#159957", "#000046", "#007991", "#56ccf2", "#f2994a", "#e44d26", "#4ac29a", "#f7971e", "#34e89e", "#6190e8", "#3494e6", "#ee0979"],
        randomNumber = Math.floor(Math.random() * colors.length);
      return colors[randomNumber];
    };
    var updateText = function($t) {
      var twitter = "https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=";
      twitter += '"' + quote.text + '" ';
      twitter += quote.author;
      var tumblr = "https://www.tumblr.com/widgets/share/tool?posttype=quote&tags=quotes,freecodecamp&caption=";
      tumblr += quote.author;
      tumblr += "&content=";
      tumblr += quote.text;
      tumblr += "&canonicalUrl=https%3A%2F%2Fwww.tumblr.com%2Fbuttons&shareSource=tumblr_share_button";
      var $icon = $("<i class='fa fa-quote-left'>").prop("aria-hidden", true);
      $t.find(".quote-text").html("").append($icon, quote.text);
      $t.find(".quote-author").html("- " + quote.author);
      $("#tweet-quote").attr("href", twitter);
      $("#tumblr-quote").attr("href", tumblr);
    };
    var calcNewHeight = function(q) {
      var $temp = $("<div>", {
        class: "quote-container temp",
      }).appendTo($("body"));
      $temp.append($("<div>", {
        class: "quote-text"
      }), $("<div>", {
        class: "quote-author"
      }));
      updateText($temp, q);
      var h = $temp.height() + 40;
      $temp.remove();
      return h;
    };
    var changeColor = function(newColor) {
      $("body, .button:not(#new-quote)").animate({
        backgroundColor: newColor
      });
      $("#new-quote").animate({
        color: newColor
      });
      $(".quote-text, .quote-author").css("color", newColor);
      if ($("#modStyle").length === 0) {
        $("head").append("<style id='modStyle'>#new-quote:before {background:" + newColor + ";} .lds-eclipse {box-shadow: 0 .25rem 0 0 " + newColor + ";}</style>");
      } else {
        $("head style#modStyle").html("#new-quote:before {background:" + newColor + ";} .lds-eclipse {box-shadow: 0 .25rem 0 0 " + newColor + ";}");
      }
    };
    var getQuote = function() {
      var nc, nh = 0;
      nc = getRandomColor();
      nh = calcNewHeight(quote);
      changeColor(nc);
      $(".quote-container, #new-quote").animate({
        height: nh / 16 + "rem",
      }, {
        duration: 1000,
        queue: false
      });
      $(".quote-container").animate({
        padding: quoteContainerEndingPadding
      }, {
        duration: 1000,
        queue: false
      });
      $("#new-quote").animate({
        padding: newQuoteEndingPadding
      }, {
        duration: 1000,
        queue: false
      });
      updateText($(".quote-container"), quote);
      $(".quote-container").children().not($(".loading")).fadeTo(750, 1);
    };
    $(".quote-container, #new-quote").css({
      visibility: "visible",
      height: 0
    });
    $("#new-quote").css("padding", "0 .75rem");
    getQuote();
  }

);
var two = function() {
  $(".quote-container").children().not($(".loading")).hide();
  $(".loading").show();
  getNewQuote(function(quote) {
    var getRandomColor = function() {
      var colors = ["#ff9966", "#7f00ff", "#396afc", "#0cebeb", "#06beb6", "#642b73", "#36d1dc", "#cb356b", "#3a1c71", "#ef3b36", "#159957", "#000046", "#007991", "#56ccf2", "#f2994a", "#e44d26", "#4ac29a", "#f7971e", "#34e89e", "#6190e8", "#3494e6", "#ee0979"],
        randomNumber = Math.floor(Math.random() * colors.length);
      return colors[randomNumber];
    };
    var updateText = function($t) {
      var twitter = "https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=";
      twitter += '"' + quote.text + '" ';
      twitter += quote.author;
      var tumblr = "https://www.tumblr.com/widgets/share/tool?posttype=quote&tags=quotes,freecodecamp&caption=";
      tumblr += quote.author;
      tumblr += "&content=";
      tumblr += quote.text;
      tumblr += "&canonicalUrl=https%3A%2F%2Fwww.tumblr.com%2Fbuttons&shareSource=tumblr_share_button";
      var $icon = $("<i class='fa fa-quote-left'>").prop("aria-hidden", true);
      $t.find(".quote-text").html("").append($icon, quote.text);
      $t.find(".quote-author").html("- " + quote.author);
      $("#tweet-quote").attr("href", twitter);
      $("#tumblr-quote").attr("href", tumblr);
    };
    var calcNewHeight = function(q) {
      var $temp = $("<div>", {
        class: "quote-container temp",
      }).appendTo($("body"));
      $temp.append($("<div>", {
        class: "quote-text"
      }), $("<div>", {
        class: "quote-author"
      }));
      updateText($temp, q);
      var h = $temp.height() + 40;
      $temp.remove();
      return h;
    };
    var changeColor = function(newColor) {
      $("body, .button:not(#new-quote)").animate({
        backgroundColor: newColor
      });
      $("#new-quote").animate({
        color: newColor
      });
      $(".quote-text, .quote-author").css("color", newColor);
      if ($("#modStyle").length === 0) {
        $("head").append("<style id='modStyle'>#new-quote:before {background:" + newColor + ";} .lds-eclipse {box-shadow: 0 .25rem 0 0 " + newColor + ";}</style>");
      } else {
        $("head style#modStyle").html("#new-quote:before {background:" + newColor + ";} .lds-eclipse {box-shadow: 0 .25rem 0 0 " + newColor + ";}");
      }
    };
    var getQuote = function() {
      var nc = getRandomColor(),
        nh = calcNewHeight(quote);
      $(".quote-container").children().not($(".loading")).css("opacity", 0);
      changeColor(nc);
      $(".quote-container, #new-quote").animate({
        height: nh / 16 + "rem",
      }, {
        duration: 1000,
        queue: false
      });
      updateText($(".quote-container"), quote);
      $(".quote-container").children().not($(".loading")).fadeTo(750, 1);
    };
    getQuote();
  });
}

;

html,
body {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #333;
  color: #333;
  font-family: sans-serif;
}

.quote-container {
  width: 35%;
  background: #fff;
  margin: 0;
  display: inline-block;
  vertical-align: middle;
  border-radius: 0.1875rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  visibility: hidden;
  min-width: 15rem;
}

.quote-text {
  font-size: 1.625rem;
}

.quote-text i {
  margin-right: 0.6rem;
}

.quote-text p {
  display: inline;
}

.quote-author {
  font-size: 1rem;
  margin: 0 0.4rem 2rem 0;
  text-align: right;
}

.button {
  padding: 0.75rem;
  text-align: center;
  font-size: 1rem;
  color: #fff;
  border-radius: 0.1875rem;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.button:not(#new-quote):hover {
  opacity: 0.8 !important;
}

.button:not(#new-quote) {
  min-width: 1rem;
  min-height: 1rem;
}

.button i {
  vertical-align: middle;
}

#new-quote {
  white-space: nowrap;
  writing-mode: vertical-lr;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  vertical-align: middle;
  background: #fff !important;
  margin: 0;
  position: relative;
  right: 0.25625rem;
  color: #333;
  visibility: hidden;
}

#new-quote:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 0.0625rem;
  bottom: 0;
  left: 0;
  visibility: hidden;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#new-quote:hover:before {
  visibility: visible;
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

.v-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.text-center {
  text-align: center;
}

footer {
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

footer a {
  text-decoration: none;
  color: #fff;
  position: relative;
}

footer a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0.0625rem;
  bottom: 0;
  left: 0;
  background: #fff;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

footer a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}


/* Loading animation */

@keyframes lds-eclipse {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes lds-eclipse {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.loading {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.lds-eclipse {
  -webkit-animation: lds-eclipse 1s linear infinite;
  animation: lds-eclipse 1s linear infinite;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  margin: auto;
}

@media (max-width: 62.5em) {
  .quote-container {
    width: 50%;
  }
}

@media (max-width: 50em) {
  .quote-container {
    width: 65%;
  }
}

@media (max-width: 17.96875em) {
  .quote-container {
    width: 40%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="v-align text-center">
  <div class="quote-container">
    <div class="quote-text">
    </div>
    <div class="quote-author"></div>
    <a id="tweet-quote" class="button"><i class="fa fa-twitter"></i></a>
    <a id="tumblr-quote" class="button"><i class="fa fa-tumblr"></i></a>
    <div class="loading">
      <div class="lds-eclipse"></div>
    </div>
  </div>
  <div id="new-quote" class="button">New quote</div>
  <footer>
    <a href="https://codepen.io/Kestis500">Created by LukasLSC</a>
  </footer>
</div>

编辑 1：Codepen：https://codepen.io/Kestis500/pen/KZvXgB?editors=0110

Answer 1

如果您想在 CSS 中对齐事物，您通常可以使用两种不同的定位概念：

1. 显示（弹性）
2. 浮动

通常最好将所有要对齐的元素放在一个像 div 这样的包装容器中。通过这种方式，您可以只关注对齐问题而忘记一般布局 - 意味着您最终希望在布局中放置对齐的元素。您稍后可以只定位包装器，而不必担心里面的元素。

另一个最佳实践是提供此容器从一个维度（至少是宽度）继承的所有元素。一个常见的错误是，应该对齐的元素仅仅因为父元素没有足够的空间来容纳一行中的所有元素而中断。如果您想知道我为什么在最后提供示例，只需按照 *.

但是，让我们回到您可以使用的两个概念。您应该使用哪一个一方面取决于您需要为各个元素提供哪些其他属性以及您需要支持哪些浏览器。如果您只想支持较新的浏览器版本，您可以使用 flexbox，更安全的方法是使用宽度和浮动百分比。

弹性盒

.container {
 display: flex;
 flex-direction: row; // this makes your elements align horizontally
}

.child1 {
  flex: 1 1 auto;
}

.child2 {
  flex: 0 1 auto;
}    

flex 属性决定子元素的尺寸。所以将父级视为 width: 100%;您作为第一个参数提供给 flex 的数字是子项的尺寸与其他子项的比率。

浮动

.container {
   overflow: hidden;
   width: 100%; // this must be relative to the containers parent of course
}

.child1 {
   width: 75%;
   float: left;
}

.child2 {
   width: 25%;
   float: left;
}

请注意，在您赋予 float 属性的元素之后，float 会对文档流中的元素生效。还要考虑到除了元素的宽度之外，您可能还需要计算边距、填充或边框（使用 box-sizing:border-box 时的填充除外），并且仅包含浮动元素的元素会丢失其“自动”尺寸浮动元素也会丢失有关高度和宽度的信息。 （溢出：隐藏在容器上为你解决了这个问题）

*在响应式设计中，例如您应该给最高父级的宽度为 100%。如果您提供给孩子宽度：50%；它现在正好占整个宽度的 50%。如果你现在给孩子宽度的孩子： 50% 它将是整个宽度的 25%。这比直接给孩子的孩子 25% 更不容易出错。让我们稍后假设您给孩子一个 50% 的宽度，孩子的孩子的宽度 (25%) 将与孩子的宽度而不是父母的宽度有关。所以你最终会得到孩子的孩子相对于整个宽度的 12.5% 的宽度。