Question

不知道为什么，但是我无法阻止红色按钮100％宽。与其将宽度拉伸到100％，不如将其尽可能地小。我可以设置最大宽度，但是如果按钮内的文本超过了宽度，那就不好了。显示为flex，block，inline-block和inline不起作用-flex shink和flex都不会增长为0。

实际上无法确定我在做什么错。有什么想法吗？

* {
  color: #000000;
  margin: 0px;
  padding: 0px;
  font-family: 'Open Sans',verdana,helvetica,arial,sans-serif;
  font-size: 100%;
  box-sizing: border-box;
}
body { max-width: 1088px }

.divStyle6 {
  width: 100%;
  background: lightgreen;
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
}
.divStyle6 div { width: 50% }
.divStyle6 > div:first-of-type {
  background: url('https://www.encoreradio.co.uk/wp/wp-content/uploads/2018/08/mamma-mia.jpg');
  background-position: top center; /* in case wrong aspect ratio image provided */
  background-size: cover;
  padding-bottom: 25%; /* aspect ratio 2:1 */
}
.divStyle6 > div:nth-of-type(2) {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 3%;
}
.divStyle6 h3 { margin: 0 }
.divStyle6 a.button {
  color: #fff;
  background-color: #c43633;
  transition: all 0.3s ease;
  font-size: 12px;
  padding: 13px 25px;
  border: none;
  text-decoration: none;
}
.divStyle6 a.button:hover { background: #000 }

@media (max-width: 767px) {
  .divStyle6 { flex-direction: column }
  .divStyle6 div { width: 100% }
  .divStyle6 > div:first-of-type { padding-bottom: 50% }
  .divStyle6 > div:nth-of-type(2) { padding: 8% }
}

<!-- BOOTSTRAP Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="divStyle6">
  <div></div>
  <div>
    <h3>random text goes here</h3>
    <p>more random text here more random text here more random text here more random text here more random text here more random text here!</p>
    <a class='button' href='#'>Click here</a>
  </div>
</div>

Answer 1

将属性align-items: flex-start添加到类“ .divStyle6”中。该按钮将根据内容大小（文本）采用其宽度。

伸缩物品的宽度不能减小，可以伸展到100％

1 个答案: