Question

我可能会遗漏一些明显的东西，所以道歉。我使用下面的代码HTML，并尝试使用CSS规则在类的旁边放置一个边框＆＃34; third-content-wrapper＆＃34;，但边框只应用于文本并围绕图像正如我所料。关于我失踪了什么的任何想法？我可以通过在图像后面放一个段落来解决它，但我想尽可能避免。干杯，亚历克斯

<div class="third-content">

 <div class="third-content-wrapper">
    <h2> Interests </h2>
        <p> Enjoying staying active by running, circuit training and attending the gym. Enjoy playing tennis, Badminton & Table tennis. I play guitar and also enjoy landscape painting having done art at A-Level and GCSE.


  <div id="images-interests">       
    <a href="images/badminton.jpg"> <img src="images/badminton.jpg"> </a>
    <a href="images/guitar.jpg"> <img src="images/guitar.jpg"> </a>
    <a href="images/tennis.jpg"> <img src="images/tennis.jpg"> </a>
    <a href="images/painting1.jpg"> <img src="images/painting1.jpg"> </a>
    </p>
  </div>



 </div>
</div>



.third-content-wrapper{
        border: solid 2px rgba(211,211,211,0.7);
        padding: 10px 30px;

        }

Answer 1

正如你所说：我正在使用下面的代码HTML，并尝试使用CSS规则在类“第三内容包装器”周围放置边框，但边框仅应用于文本并围绕图像正如我所料。

我很困惑你确实把边框放在第三个内容包装器上，就像你想要的那样...正在寻找类似的东西：

body{
  padding: 0;
  margin: 0;
}

.third-content-wrapper {
  border: solid 2px rgba(211,211,211,0.7);
  padding: 10px 30px;
  width: 100%;
  height: 100vh;
}

<div class="third-content">
 <div class="third-content-wrapper">
    <h2> Interests </h2>
    <p> Enjoying staying active by running, circuit training and attending the gym. Enjoy playing tennis, Badminton & Table tennis. I play guitar and also enjoy landscape painting having done art at A-Level and GCSE.<p>

    <div id="images-interests">       
      <a href="images/badminton.jpg"> <img src="images/badminton.jpg"> </a>
      <a href="images/guitar.jpg"> <img src="images/guitar.jpg"> </a>
      <a href="images/tennis.jpg"> <img src="images/tennis.jpg"> </a>
      <a href="images/painting1.jpg"> <img src="images/painting1.jpg"> </a>
    </div>
 </div>
</div>

它几乎是相同的结果，但当你全屏显示它并不紧紧围绕着这个类。您可以摆弄高度和宽度，也可以尝试将div放在边框中间。如果那就是你要找的东西。例如：

body{
  padding: 0;
  margin: 0;
}

.third-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.third-content-wrapper {
  border: solid 2px rgba(211,211,211,0.7);
  padding: 10px 30px;
  width: 75%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

<div class="third-content">
 <div class="third-content-wrapper">
    <h2> Interests </h2>
    <p> Enjoying staying active by running, circuit training and attending the gym. Enjoy playing tennis, Badminton & Table tennis. I play guitar and also enjoy landscape painting having done art at A-Level and GCSE.<p>

    <div id="images-interests">       
      <a href="images/badminton.jpg"> <img src="images/badminton.jpg"> </a>
      <a href="images/guitar.jpg"> <img src="images/guitar.jpg"> </a>
      <a href="images/tennis.jpg"> <img src="images/tennis.jpg"> </a>
      <a href="images/painting1.jpg"> <img src="images/painting1.jpg"> </a>
    </div>
 </div>
</div>

以下是有关flex-box的更多信息的链接：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我为flex-box所做的代码可以更优雅的方式完成，只是为了让你知道：p

边界不包围锚元素

1 个答案: