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

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

转载作者：太空宇宙更新时间：2023-11-04 07:46:42

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

也许那是因为 #new-quote 不是 .quote-container 的子代？我什至试图让它成为一个 child ，结果更糟(图片是在桌面窗口大小上拍摄的):

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

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 中对齐事物，您通常可以使用两种不同的定位概念:

展示( flex )
漂浮

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

另一个最佳实践是为该容器从一个维度(至少是宽度)继承的所有元素提供。一个常见的错误是，应该对齐的元素会因为父元素没有足够的空间在一行中容纳所有元素而中断。如果你想知道我为什么要在最后举个例子，跟着*就可以了。

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

flexbox

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

.child1 {
  flex: 1 1 auto;
}

.child2 {
  flex: 0 1 auto;
}

flex 属性决定了 child 的维度。所以将父级视为 width: 100%;并且您作为第一个参数提供给 flex 的数字是 child 的尺寸与其他 child 的比例。

float

.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)并且仅包含 float 元素的元素将失去其“自动”尺寸，因为 float 元素也会丢失有关高度和宽度的信息。 (overflow: hidden on the container 为你解决了这个问题)

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

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

文章推荐： java - 自定义文本字段 UI 外观和感觉

文章推荐： java - 图像图标未出现在 Eclipse 外部

文章推荐： java - 使用 jersey 在 JAX-RS 中设置 @RolesAllowed 的角色

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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