Render a div near a text area如何在文本区域附近渲染一个
元素？

huangapple
go评论63阅读模式
英文:

How can i render a div near a text area?

问题

I need a certain div to get near a certain textarea, by using either HTML, and CSS. Therefore, here's my code.

HTML:

<!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;&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>

CSS:

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;
}

I tried to place in my code, a CSS flexbox on auto, but didn't work, I expected it to center away from it, and it resulted in a textarea, and below it, the div code-runner.

英文:

I need a certain div to get near a certain textarea, by using either HTML, and CSS. Therefore, here's my code.

HTML

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;.HUS LENGUAGE&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;initial-bar&quot; style=&quot;background-color: #1a1a1a; width: 1330px; height: 90px;&quot;&gt;
        &lt;div class=&quot;text-title-spacing&quot;&gt;
            &amp;nbsp; 
        &lt;/div&gt;
            &lt;h1 class=&quot;p-title-bar&quot;&gt;&amp;nbsp;&amp;nbsp;.HUS&lt;/h1&gt;
            &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;div class=&quot;go-button&quot;&gt;
                &lt;p id=&quot;button-title&quot;&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp;RUN !&lt;/p&gt;
        &lt;/div&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;hus.css&quot;&gt;

       &lt;/div&gt;
        &lt;p id=&quot;spacer&quot;&gt;&lt;/p&gt;
&lt;textarea&gt;&lt;/textarea&gt;
&lt;div class=&quot;code-runner&quot;&gt;

&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

CSS

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;
}

I tried to place in my code, a CSS flexbox on auto, but didn't work, I expected it to center away from it, and it resulted in a textarea, and below it, the div code-runner.

答案1

得分: 1

以下是翻译好的部分：

这是如何将项目并排显示的方法：

使用一个div容器，并将该容器设置为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/

演示示例：

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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;
}

<!-- language: lang-html -->

<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>
  <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>

<!-- end snippet -->
英文:

Here is how to display the items side to side:

Use a div container and set that container to flex and flex-row

css:

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

html:

&lt;div class=&quot;text-area-container&quot;&gt;
  &lt;textarea&gt;&lt;/textarea&gt;
  &lt;div class=&quot;code-runner&quot;&gt;
    Code Runner div
  &lt;/div&gt;
&lt;/div&gt;

Here is a tool to plaay with css flexbox: https://www.cssportal.com/css-flexbox-generator/

demo answer:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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;
}

<!-- language: lang-html -->

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

&lt;/div&gt;
&lt;p id=&quot;spacer&quot;&gt;&lt;/p&gt;
&lt;div class=&quot;text-area-container&quot;&gt;
  &lt;textarea&gt;&lt;/textarea&gt;
  &lt;div class=&quot;code-runner&quot;&gt;
    Code Runner div
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月14日 10:19:26
  • 转载请务必保留本文链接：https://go.coder-hub.com/76245554.html
  • css
  • flexbox
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定