欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

如何在文本區(qū)域附近渲染一個div？

CSS
錢瀠龍2年前7瀏覽0評論

我需要一個特定的div來接近一個特定的文本區(qū)域，通過使用HTML或者CSS。因此，這是我的代碼。

超文本標(biāo)記語言

<!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>.HUS LENGUAGE</title>
</head>
<body>
    <div class="initial-bar" style="background-color: #1a1a1a; width: 1330px; height: 90px;">
        <div class="text-title-spacing">
            &nbsp; 
        </div>
            <h1 class="p-title-bar">&nbsp;&nbsp;.HUS</h1>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="go-button">
                <p id="button-title"> &nbsp; &nbsp; &nbsp;RUN !</p>
        </div>
        <link rel="stylesheet" href="hus.css">

       </div>
        <p id="spacer"></p>
<textarea></textarea>
<div class="code-runner">

</div>
</body>
</html>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

body {
    background: #2a2a2a;
    color: white;
    font-family: sans-serif;
}
.p-title-bar {
    color: white;
    font-size:  32px;
    line-height: 18px;
    font-style: oblique;    
    display:inline-block;
}
.go-button {
    background-color: #207000;
    border-radius: 10px;
    width: 100px;
    height: 50px;
    display:inline-block;
}
#button-title {
    font-size:  18px;
    line-height: 18px;
}
textarea {
    background-color: #1a1a1a;
    width: 675px;
    height: 675px;
    border: #1a1a1a;
    color: white;
    line-height: 1,5;
    font-size: 25px;
}
.code-runner {
    width: 645px;
    height: 645px;
    background-color: #1a1a1a;
}

我試圖在我的代碼中放置一個CSS flexbox在auto上，但是沒有成功，我期望它遠(yuǎn)離它，它產(chǎn)生了一個textarea，在它下面是div代碼運行器。

以下是如何并排顯示項目:

使用一個div容器并將該容器設(shè)置為flex和flex-row

css:

.text-area-container {
  display: flex;
  flex-direction: row;
}

html:

<div class="text-area-container">
  <textarea></textarea>
  <div class="code-runner">
    Code Runner div
  </div>
</div>

這里有一個使用css flexbox的工具:https://www.cssportal.com/css-flexbox-generator/

演示答案:

body {
  background: #2a2a2a;
  color: white;
  font-family: sans-serif;
}

.p-title-bar {
  color: white;
  font-size: 32px;
  line-height: 18px;
  font-style: oblique;
  display: inline-block;
}

.go-button {
  background-color: #207000;
  border-radius: 10px;
  width: 100px;
  height: 50px;
  display: inline-block;
}

#button-title {
  font-size: 18px;
  line-height: 18px;
}

textarea {
  background-color: #1a1a1a;
  width: 675px;
  height: 675px;
  border: #1a1a1a;
  color: white;
  line-height: 1, 5;
  font-size: 25px;
}

.code-runner {
  width: 645px;
  height: 645px;
  background-color: #1a1a1a;
}

.text-area-container {
  display: flex;
  flex-direction: row;
}

<div class="initial-bar" style="background-color: #1a1a1a; width: 1330px; height: 90px;">
  <div class="text-title-spacing">
    &nbsp;
  </div>
  <h1 class="p-title-bar">&nbsp;&nbsp;.HUS</h1>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="go-button">
    <p id="button-title"> &nbsp; &nbsp; &nbsp;RUN !</p>
  </div>
  <link rel="stylesheet" href="hus.css">

</div>
<p id="spacer"></p>
<div class="text-area-container">
  <textarea></textarea>
  <div class="code-runner">
    Code Runner div
  </div>
</div>