停止重疊html和css的文本-有解無憂

當我調整視窗大小時，我的文本重疊。我該如何阻止這種情況發生？如果它與其他文本元素發生沖突，或者如果不可能，它們只是相互堆疊，我希望它只調整大小？問題

我已經試過了

彈性盒
設定最小高度

有人能告訴我我應該主要使用什么位置嗎？

html:

<body>
    <div class="flex_container">
       <div class="bar">
           <h1 class="tekst" title="Coffeesnakes">Coffeesnakes</h1>
           <button class="aboutus" onclick="func()">About us!</button>
           <div class="ccontroller">
           <p class="creator1" title="Can code: Java, c#, html, js, python, arduino">Christian2B</p>
           <p class="creator2" title="Can code: html, python, js ">Timgb11</p>
        </div>
       </div>
    </div>
</body>

抄送：

.flex_container {
  display: flex;
  flex-wrap: wrap;
  min-width: 550px;
  flex-direction: column;
  position: relative;
}

.bar {
  position: relative;
  background-color: rgb(41, 80, 143);
  border: 5px solid rgb(46, 84, 149);
  height: 30px;
  width: auto;
  margin: 0;
}

.tekst {
  color: white;
  position: static;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  justify-content: center;
  vertical-align: middle;
  line-height: 30px;
  font-family: Arial, Helvetica, sans-serif;
}

.ccontroller {
  margin-top: -12px;
}

.creator1 {
  font-size: 25px;
  color: white;
  text-align: left;
  margin: 0;
  justify-content: center;
  vertical-align: middle;
  line-height: 0px;
  font-family: Arial, Helvetica, sans-serif;
}

.creator2 {
  color: white;
  font-size: 25px;
  text-align: right;
  margin: 0;
  justify-content: center;
  vertical-align: middle;
  line-height: 0px;
  font-family: Arial, Helvetica, sans-serif;
}

.aboutus {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 25%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: white;
  background-color: #123456;
  height: 15px;
  width: auto;
}

body {
  background-color: #123456;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: 100% 100%;
  min-width: 550px;
  position: relative;
  margin: 0;
  padding: 0;
}

html,
body {
  min-width: 550px;
  position: relative;
  margin: 0;
  padding: 0;
}

uj5u.com熱心網友回復：

你button有一個.aboutus設定的類position:absolute;。這會忽略其他元素的寬度，并在父 div 中絕對定位該元素。

請提供您要實作的目標的實際表示。

如果您想要一種結構化的方法，您可以使用 flexbox 執行類似的操作（調整視窗大小以查看其運行情況）：

.flex_container {
  display: flex;
  flex-wrap: wrap;
  min-width: 550px;
  flex-direction: column;
  position: relative;
}

.bar {
  position: relative;
  background-color: rgb(41, 80, 143);
  border: 5px solid rgb(46, 84, 149);
  height: 30px;
  width: auto;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.tekst {
  color: white;
  position: static;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  justify-content: center;
  vertical-align: middle;
  line-height: 30px;
  font-family: Arial, Helvetica, sans-serif;
}

.ccontroller {
  margin-top: -12px;
}

.creator1 {
  font-size: 25px;
  color: white;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.creator2 {
  color: white;
  font-size: 25px;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.aboutus {
  margin: 0;
  color: white;
  background-color: #123456;
  width: auto;
}

body {
  background-color: #123456;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: 100% 100%;
  min-width: 550px;
  position: relative;
  margin: 0;
  padding: 0;
}

html,
body {
  min-width: 550px;
  position: relative;
  margin: 0;
  padding: 0;
}

<body>
  <div class="flex_container">
    <div class="bar">
      <p class="creator1" title="Can code: Java, c#, html, js, python, arduino">Christian2B</p>
      <h1 class="tekst" title="Coffeesnakes">Coffeesnakes</h1>
      <p class="creator2" title="Can code: html, python, js ">Timgb11</p>
      <button class="aboutus" onclick="func()">About us!</button>
    </div>
  </div>
</body>

uj5u.com熱心網友回復：

添加min-width到您的專案。就像在下面的抽象作業示例中一樣：

.flex-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

p {
  margin: 5px;
  min-width:200px;
}

<div class="flex-box">
  <p>foo</p>
  <p>bar</p>
  <p>baz</p>
</div>

uj5u.com熱心網友回復：

解決問題的一種方法是使用彈性框，但這次在 css 中添加一個部分，一旦螢屏達到一定大小，彈性框就會從行到列。像這樣：

.bar-element {
    display: flex;
    flex-direction: row;
}

@media (max-width:700px){
    .bar-element {
        display: flex;
        flex-direction: column;
    }
}

因此，一旦螢屏達到窗簾尺寸，它就會改變布局。

這是一個演示：

.flex {
  display: flex;
  flex-direction: row;
}

p {
  margin: 5px;
}

@media (max-width:700px){
   .flex {
      display: flex;
      flex-direction: column;
    }

}

<div class="flex">
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
</div>

您還可以查看此處的鏈接，以了解有關如何更改不同螢屏尺寸的屬性的更多資訊。

這是您編輯的代碼：

<!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>Document</title>
</head>
<style>
    /* .flex_container {
        display: flex;
        flex-wrap: wrap;
        min-width: 550px;
        flex-direction: column;
        position: relative;
    } */
    
    .bar {
        position: relative;
        background-color: rgb(41, 80, 143);
        border: 5px solid rgb(46, 84, 149);
        height: 30px;
        width: auto;
        margin: 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    
    .tekst {
        color: white;
        text-transform: uppercase;
        text-align: center;
        margin: 0;
        vertical-align: middle;
        line-height: 30px;
        font-family: Arial, Helvetica, sans-serif;
    }
    
    .ccontroller {
        display: flex;
        flex-direction: row;
        width: fit-content;
        flex-wrap: wrap;
        justify-content: flex-end;
        justify-self: flex-end;
    }
    
    .creator1 {
        display: block;
        font-size: 25px;
        color: white;
        text-align: left;
        margin: 0;
        line-height: auto;
        font-family: Arial, Helvetica, sans-serif;
        margin-right: 10px;
    }
    
    .creator2 {
        display: block;
        color: white;
        font-size: 25px;
        text-align: left;
        margin: 0;
        line-height: auto;
        font-family: Arial, Helvetica, sans-serif;
    }
    
    .aboutus {
        display: block;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        color: white;
        background-color: #123456;
        height: fit-content;
        width: auto;
        margin-top: 16px;
        margin-left: 50px;
        text-align: center;
    }
    
    body {
        background-color: #123456;
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
        background-size: 100% 100%;
        min-width: 550px;
        position: relative;
        margin: 0;
        padding: 0;
    }
    
    html,
    body {
        position: relative;
        margin: 0;
        padding: 0;
    }
    
    @media (max-width:700px) {
        .bar {
            display: flex;
            flex-direction: column;
        }
        .ccontroller {
            display: flex;
            flex-direction: column;
        }
    }
</style>

<body>
    <div class="flex_container">
        <div class="bar">
            <h1 class="tekst" title="Coffeesnakes">Coffeesnakes</h1>
            <button class="aboutus" onclick="func()">About us!</button>
            <div class="ccontroller">
                <p class="creator1" title="Can code: Java, c#, html, js, python, arduino">Christian2B</p>
                <p class="creator2" title="Can code: html, python, js ">Timgb11</p>
            </div>
        </div>
    </div>
</body>

</html>

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

標籤：

上一篇：基于類的UpdateViewdjango中的自定義按鈕

下一篇：影像內的文字不居中