html - 如果不是 child ，如何不让元素刹车

我想将.quote-container和#new-quote元素放在同一行中，即使窗口宽度很小。例如83像素。在min-width元素上使用.quote-container是有效的，但是，在#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

最佳答案

如果要在CSS中对齐内容，通常可以使用两种不同的定位概念来实现此目的：


显示（弯曲）
浮动


通常，将所有要对齐的元素放入包装容器（如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属性确定子项的尺寸。因此，将父级视为宽度：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％。

关于html - 如果不是 child ，如何不让元素刹车，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48081684/