Question

我试图在段落的右下角对齐我的按钮。尝试使用辅助选择器定位它。将此元素推送到容器底部的最佳方法是什么？我如何确保它保持在其内部

HTML只是一个img和一个段落。有没有更好的方法将文本包装到一个盒子里，而不仅仅是设置段落样式并在里面放一个按钮？

＆＃13;

.primary {
  /*    visibility: hidden;*/
  width: 300px;
}

.flex-container {
  display: flex;
}

.secondary {
  box-sizing: border-box;
  border-radius: 5%;
  color: tomato;
  background-color: #2E2E2E;
  border-top: 20px solid #3B3B3B;
  width: 300px;
  min-height: 300px;
}

body {
  background-color: darkgrey;
}


/*

flexbox stuff
*/

.secondary {
  /*    should style the button?*/
  flex-direction: column;
  justify-content: flex-end;
}

@media (max-width: 769px) {
  .flex-container {
    flex-direction: row;
    justify-content: center;
  }
  .primary {
    display: none;
  }
}


/*Show image and text stacked between 769px : 960px*/

@media (min-width: 769px) and (max-width: 960px) {
  .flex-container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}


/*Image and text side by side when screen > 960px*/

@media (min-width: 960px) {
  .flex-container {
    flex-direction: row;
    justify-content: space-around;
  }

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>

  <div class="flex-container">
    <div class="item primary">
      <img class="item primary" src="https://placeimg.com/300/300/tech">
    </div>
    <div>
      <p class="item secondary">The paragraph
        <div class="button-cnt">
          <button class="btn">Go</button>
        </div>

      </p>
    </div>

  </div>
</body>

</html>

＆＃13;

按钮落在div外面与flexbox

0 个答案: