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

问题描述 投票：0回答：1

我想在同一行中制作.quote-container和#new-quote元素，即使窗口宽度非常小。例如83像素。然而，在min-width元素上使用.quote-container，在#new-quote元素上使用相同的技术不起作用。

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

我想在视觉上实现的目标：enter image description here

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

html css
1个回答
1
投票

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

  1. 显示（flex）
  2. 浮动

通常，最好将所有要对齐的元素放在包装容器（如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属性的元素之后的文档流中的元素生效。还要考虑到除了元素的宽度之外，您可能还需要计算边距，填充或边框（使用box-sizing：border-box时填充除外），并且仅包含浮动元素的元素会丢失其“自动”尺寸浮动元素也会丢失有关高度和宽度的信息。 （溢出：隐藏在容器上为您解决了这个问题）

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.