flex中的垂直線-有解無憂

我試圖弄清楚如何應用一條垂直線，該垂直線將在側邊欄和主要內容這兩個元素之間一直向下延伸。這將是我做網站的最后一個問題，我希望有人能幫助我們解決我的問題。我在側邊欄中嘗試了右邊界，但它并沒有一直向下延伸。

https://jsfiddle.net/chrismontage/43j1z0L8/5/

/*COLOR PALETTE*/

$color1: #B87D6F;
$color2: #EBE0DD;
$color3: #FFFFFF;
$color4: #737373;
$color5: #C4B0AC;
$color6: #545454;
$color7: #A6A6A6;
$color8: #F4F4F4;
$color9: #000000;
$color10: #ebe0dd;

/*FONTS*/

$font1: Neue Montreal;
$font2: Neue Einstellung;
$font3: Maharlika;
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.line {
  padding: 8px;
  border-bottom: 1px solid #C4B0AC;
}

.sidebar ul {
  list-style: none;
  text-align: center;
}

.sidebar ul li a {
  text-decoration: none;
  color: #000000;
  font-family: Neue Montreal;
  font-weight: lighter;
  font-size: 20px;
  padding: 10px;
}

.first a {
  background-color: #ebe0dd;
  ;
}

.sidebar a:hover {
  color: #B87D6F;
}

.item1,
.item2 {
  padding: 1.5%;
  background-color: #F4F4F4;
}

.item1 {
  margin-bottom: 2%;
}

.brand-and-desc h4 {
  font-family: $font1;
  font-weight: normal;
  font-size: 15px;
  color: #545454;
}

.status-and-price h4 {
  font-family: Neue Montreal;
  font-weight: normal;
  font-size: 15px;
  text-align: right;
  color: #545454;
}

.contact h4 {
  color: #FFFFFF;
  background-color: #B87D6F;
  font-family: Neue Montreal;
  font-size: 13px;
  width: 20%;
  align-items: center;
}

.contact a {
  text-decoration: none;
  color: #FFFFFF;
  background-color: #B87D6F;
  padding: 1px 9px;
  font-size: 15px;
  font-family: Neue Montreal;
  font-weight: normal;
}

.contact a:hover {
  color: #A6A6A6;
}

.contact a:active {
  color: #A6A6A6;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HIRAYA | Cart</title>
  <link rel="stylesheet" href="/styles/sidebar.css">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

</head>

<body>

  <div class="line">
    </hr>
  </div>

  <div class="d-flex my-4 h-100">
    <header class="sidebar">

      <div class="d-flex flex-column d-none d-md-block">
        <ul>
          <li class="my-3 first"><a href="#">All</a></li>
          <li class="my-3"><a href="#">To Pay</a></li>
          <li class="my-3"><a href="#">To Ship</a></li>
          <li class="my-3"><a href="#">To Receive</a></li>
          <li class="my-3"><a href="#">Completed</a></li>
          <li class="my-3"><a href="#">Cancelled</a></li>
        </ul>
      </div>
    </header>


    <div class="container items-content" style="width: 80%;">
      <div class="row item1">
        <div class="col-3 col-md-2 col-lg-1">
          <img class="d-none d-md-block mx-3" src="/images/charrr.png" alt="" style="width: 50%;">
          <img class="my-2" src="/images/charlottewhite.jpg" alt="" style="width: 100%;">

        </div>

        <div class="col-6 col-md-8 my-2 brand-and-desc">
          <h4>Charlotte Folk</span>
          </h4>
          <h4>CFXXI Sweater</h4>
          <h4>Large</h4>
          <h4>x1</h4>
        </div>

        <div class="col-3 col-md-2  my-2 status-and-price">
          <h4>To Pay</h4>
          <h4>P990</h4>
        </div>

        <div class="col-lg-12 text-center contact"><a href="#">
              Contact Seller</a>
        </div>
      </div>

      <div class="row item2">
        <div class="col-3 col-md-2 col-lg-1">
          <img class="d-none d-md-block mx-3" src="/images/homelandlogo.png" alt="" style="width: 50%;">
          <img class="my-2" src="/images/homelandproduct.png" alt="" style="width: 100%;">
        </div>

        <div class="col-6 col-md-8 my-2 brand-and-desc">
          <h4>Homeland</span>
          </h4>
          <h4>Care Reminder? Tee Oversized Boxy Tee - Wheat</h4>
          <h4>Oversized Large</h4>
          <h4>x1</h4>
        </div>

        <div class="col-3 col-md-2 my-2 status-and-price">
          <h4>Completed</h4>
          <h4>P649</h4>
        </div>

        <div class="col-lg-12 text-center contact"><a href="#">
            Contact Seller</a>
        </div>
      </div>
    </div>




    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
</body>

</html>

uj5u.com熱心網友回復：

所以我在搞亂你的 jsfiddle，以下似乎有效。

在 HTML 中添加vh-100到您的<header>以使其成為完整高度。

 <header class = "sidebar vh-100">

<header>并在 CSS 中為您之前嘗試過的邊框添加一些快速代碼。

.sidebar{
border-right: 1px solid blue;
}

uj5u.com熱心網友回復：

小心在標記中出現語意錯誤。我注意到您的 HTML 中存在一些間距問題和隨機結束</span>標記。

話雖如此，您可以為它添加vh-100類以.sidebar使其保持整個視口高度并在border-right其后添加樣式。然后，您可以使用padding將與分開。borderul

/*COLOR PALETTE*/

$color1: #B87D6F;
$color2: #EBE0DD;
$color3: #FFFFFF;
$color4: #737373;
$color5: #C4B0AC;
$color6: #545454;
$color7: #A6A6A6;
$color8: #F4F4F4;
$color9: #000000;
$color10: #ebe0dd;

/*FONTS*/

$font1: Neue Montreal;
$font2: Neue Einstellung;
$font3: Maharlika;
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.line {
  padding: 8px;
  border-bottom: 1px solid #C4B0AC;
}

.sidebar {
  border-right: solid 1px black;
  padding-right: 1em;
}

.sidebar ul {
  list-style: none;
  text-align: center;
}

.sidebar ul li a {
  text-decoration: none;
  color: #000000;
  font-family: Neue Montreal;
  font-weight: lighter;
  font-size: 20px;
  padding: 10px;
}

.first a {
  background-color: #ebe0dd;
  ;
}

.sidebar a:hover {
  color: #B87D6F;
}

.item1,
.item2 {
  padding: 1.5%;
  background-color: #F4F4F4;
}

.item1 {
  margin-bottom: 2%;
}

.brand-and-desc h4 {
  font-family: $font1;
  font-weight: normal;
  font-size: 15px;
  color: #545454;
}

.status-and-price h4 {
  font-family: Neue Montreal;
  font-weight: normal;
  font-size: 15px;
  text-align: right;
  color: #545454;
}

.contact h4 {
  color: #FFFFFF;
  background-color: #B87D6F;
  font-family: Neue Montreal;
  font-size: 13px;
  width: 20%;
  align-items: center;
}

.contact a {
  text-decoration: none;
  color: #FFFFFF;
  background-color: #B87D6F;
  padding: 1px 9px;
  font-size: 15px;
  font-family: Neue Montreal;
  font-weight: normal;
}

.contact a:hover {
  color: #A6A6A6;
}

.contact a:active {
  color: #A6A6A6;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HIRAYA | Cart</title>
  <link rel="stylesheet" href="/styles/sidebar.css">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <div class="line"></div>
  <div class="d-flex my-4 h-100">
    <header class="sidebar-wrapper">
      <div class="d-flex flex-column d-none d-md-block vh-100 sidebar">
        <ul>
          <li class="my-3 first"><a href="#">All</a></li>
          <li class="my-3"><a href="#">To Pay</a></li>
          <li class="my-3"><a href="#">To Ship</a></li>
          <li class="my-3"><a href="#">To Receive</a></li>
          <li class="my-3"><a href="#">Completed</a></li>
          <li class="my-3"><a href="#">Cancelled</a></li>
        </ul>
      </div>
    </header>
    <div class="container items-content" style="width: 80%;">
      <div class="row item1">
        <div class="col-3 col-md-2 col-lg-1">
          <img class="d-none d-md-block mx-3" src="/images/charrr.png" alt="" style="width: 50%;">
          <img class="my-2" src="/images/charlottewhite.jpg" alt="" style="width: 100%;">
        </div>
        <div class="col-6 col-md-8 my-2 brand-and-desc">
          <h4>Charlotte Folk</h4>
          <h4>CFXXI Sweater</h4>
          <h4>Large</h4>
          <h4>x1</h4>
        </div>
        <div class="col-3 col-md-2  my-2 status-and-price">
          <h4>To Pay</h4>
          <h4>P990</h4>
        </div>
        <div class="col-lg-12 text-center contact"><a href="#">
              Contact Seller</a>
        </div>
      </div>
      <div class="row item2">
        <div class="col-3 col-md-2 col-lg-1">
          <img class="d-none d-md-block mx-3" src="/images/homelandlogo.png" alt="" style="width: 50%;">
          <img class="my-2" src="/images/homelandproduct.png" alt="" style="width: 100%;">
        </div>
        <div class="col-6 col-md-8 my-2 brand-and-desc">
          <h4>Homeland</h4>
          <h4>Care Reminder? Tee Oversized Boxy Tee - Wheat</h4>
          <h4>Oversized Large</h4>
          <h4>x1</h4>
        </div>
        <div class="col-3 col-md-2 my-2 status-and-price">
          <h4>Completed</h4>
          <h4>P649</h4>
        </div>
        <div class="col-lg-12 text-center contact"><a href="#">
            Contact Seller</a>
        </div>
      </div>
    </div>
  </div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/464146.html

標籤：html css 推特引导弹性盒引导程序 5

上一篇：如何使用jq從json陣列/物件中獲取多個值

下一篇：LaravelUibootstrap，bootstrap沒有定義