Question

即使窗口宽度非常小，我也想在同一行中同时生成.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

Answer 1

如果你想在CSS中对齐东西，你通常可以使用两种不同的定位概念来实现这个目的：

display（flex）
浮

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

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

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

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属性的元素之后的文档流中的元素生效。还要考虑到除了元素之外，您可能还需要计算边距，填充或边框。 widths（使用box-sizing：border-box时填充除外）以及仅包含浮动元素的元素会丢失＆＃34;自动＆＃34;作为浮动元素的尺寸也会丢失有关高度和宽度的信息。（溢出：隐藏在容器上为您解决了这个问题）

*在响应式设计中，例如你应该给最高的父母宽度100％。如果您提供给孩子宽度：50％;它现在将具有整个宽度的50％。如果您现在给孩子宽度：50％，它将是整个宽度的25％。这样不容易出错，然后直接给孩子25％的孩子。让我们稍后假设您给孩子宽度为50％，孩子的宽度（25％）将与孩子的宽度而不是父母的宽度相关。因此，相对于整个宽度，孩子的孩子最终宽度为12.5％。

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

1 个答案: