有沒有辦法將我的flex50/50SplitViewCSS轉換為70/30？-有解無憂

html {
    transition: all 0.5s ease-out;
  }
  
  *, *::before, *::after {
    box-sizing: border-box;
  }
  
  .split-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    background-color: #111;
  }
  
  .box {
    position: relative;
    flex-basis: 50%;
    height: 100%;
    transition: 0.6s all cubic-bezier(0.2, 0.6, 0.7, 1);
    background-position: center;
  }
  
  .box:hover {
    flex-basis: calc(100% / 13 * 9);
  }
  
  .box__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 0.8s all ease-out;
    transition: 0.8s all cubic-bezier(1, 0, 0, 1);
  }
  
  .box-1 {
    background-size: cover;
    font-family: 'Kanit', sans-serif;
  }
  
  .box-1 .box__overlay {
    background-color: rgba(96, 155, 116, 0.2);
  }
  
  .box-1:hover .box__overlay {
    background-color: rgba(96, 155, 116, 0.1);
  }
  
  .box-1 .box__title {
    position: absolute;
    bottom: 0;
    text-align: left;
    margin: 0.5em 0.8em;
    color: white;
    font-size: calc(30px   20 * ((100vw - 320px) / 680));
    word-spacing: 100vw;
  }
  
  .box-2 {
    background-size: cover;
    font-family: 'Kanit', sans-serif;
  }
  
  .box-2 .box__overlay {
    background-color: rgba(96, 155, 116, 0.8);
  }
  
  .box-2:hover .box__overlay {
    background-color: rgba(0, 157, 157, 0.5);
  }
  
  .box-2 .box__title {
    position: absolute;
    bottom: 0;
    text-align: right;
    margin: 0.5em 0.8em;
    color: #fff;
    font-size: calc(30px   15 * ((100vw - 320px) / 680));
    word-spacing: 100vw;
  }

<!DOCTYPE html>
<html>

<head>
  <title>Oco, online coworking</title>
  <meta charset="UTF-8">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@200&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/home.css') }}" type="text/css">
</head>

<body>

<section class="split-view">
  <div class="box box-1">
    <a href="{{ url_for('study_hub')}}" class="box__overlay">
      <h1 class="box__title">Study Hub</h1>
    </a>
  </div>

  <div class="box box-2">
    <div class="box__overlay">
      <h1 class="box__title">About</h1>
    </div>
  </div>
</section>

</body>

</html>

完全的初學者，卡在這個，'elp

我正在嘗試訪問各個框的 css，以便我可以將比例更改為 70/30 螢屏布局，而不是當前的 50/50，但無論我如何更改它，要么完全磨損我的過渡，要么整個事情休息。
我的任何試驗和錯誤細節都可能沒有任何幫助，很抱歉把這個交給你。<3

uj5u.com熱心網友回復：

這是你想要的？只需給框單獨的flex-basis值。現在他們都共享相同的值50%。即使您將其更改為類似70%的值，它們都具有相同的值，并且它們都無法接受70%，因此它實際上仍保持在50%.

html {
    transition: all 0.5s ease-out;
  }
  
  *, *::before, *::after {
    box-sizing: border-box;
  }
  
  .split-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    background-color: #111;
  }
  
  .box {
    position: relative;
    height: 100%;
    transition: 0.6s all cubic-bezier(0.2, 0.6, 0.7, 1);
    background-position: center;
  }
  
  .box:hover {
    flex-basis: calc(100% / 13 * 9);
  }
  
  .box__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 0.8s all ease-out;
    transition: 0.8s all cubic-bezier(1, 0, 0, 1);
  }
  
  .box-1 {
    flex-basis: 30%;
    background-size: cover;
    font-family: 'Kanit', sans-serif;
  }
  
  .box-1 .box__overlay {
    background-color: rgba(96, 155, 116, 0.2);
  }
  
  .box-1:hover .box__overlay {
    background-color: rgba(96, 155, 116, 0.1);
  }
  
  .box-1 .box__title {
    position: absolute;
    bottom: 0;
    text-align: left;
    margin: 0.5em 0.8em;
    color: white;
    font-size: calc(30px   20 * ((100vw - 320px) / 680));
    word-spacing: 100vw;
  }
  
  .box-2 {
    flex-basis: 70%;
    background-size: cover;
    font-family: 'Kanit', sans-serif;
  }
  
  .box-2 .box__overlay {
    background-color: rgba(96, 155, 116, 0.8);
  }
  
  .box-2:hover .box__overlay {
    background-color: rgba(0, 157, 157, 0.5);
  }
  
  .box-2 .box__title {
    position: absolute;
    bottom: 0;
    text-align: right;
    margin: 0.5em 0.8em;
    color: #fff;
    font-size: calc(30px   15 * ((100vw - 320px) / 680));
    word-spacing: 100vw;
  }

<!DOCTYPE html>
<html>

<head>
  <title>Oco, online coworking</title>
  <meta charset="UTF-8">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@200&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/home.css') }}" type="text/css">
</head>

<body>

<section class="split-view">
  <div class="box box-1">
    <a href="{{ url_for('study_hub')}}" class="box__overlay">
      <h1 class="box__title">Study Hub</h1>
    </a>
  </div>

  <div class="box box-2">
    <div class="box__overlay">
      <h1 class="box__title">About</h1>
    </div>
  </div>
</section>

</body>

</html>

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

標籤：html css

上一篇：CSS特異性順序

下一篇：在HTML和CSS的每個單詞之間添加空格