在HTML/CSS中包裹文本：如何将预格式化文本放在右侧而不是下方？

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

Wrapping text in HTML/CSS: How to put a preformatted text on the right side instead of under?

问题

程序员们！我正在编写代码来创建一个无限长度的豪华轿车，但无法弄清楚如何将预格式化文本（pre）放在div“wrapper”的左侧而不是下方。

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

<!-- language: lang-css -->
html, body {
  margin: 0;
  min-width: 100%;
  min-height: 100%;
}

.wrapper {
  padding-top: 30vh;
  padding-left: 25vw;
  width: 271px;
  margin: auto;
}

<!-- language: lang-html -->
<div class="wrapper">
  <pre>
                             _________
                            /        |
                          /          |
      __________________/()__________|
    {}_________________|___________=_|
   { }      ______     |           . |
 _{ #}_    /##  ##\    |             |
{______)__|##    ##|___|_____________|
            ##__##  \
  </pre>
  <pre class="seat">
_____________________________________________________
                                                    |
                                                    |
_____________________________________________________|
__________________________________________________=_|
                                                  . |
                                                    |
_____________________________________________________|
  </pre>
</div>

<!-- end snippet -->

我尝试过使用 float: right; 但没有起作用。

英文:

programmers! I am workin on coding an infinate limousine and cant figure it out how do you place the preformatted text (pre) on the left side instead of under in the div "wrapper".

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

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

html, body {
  margin: 0;
  min-width: 100%;
  min-height: 100%;
}

.wrapper {
  padding-top: 30vh;
  padding-left: 25vw;
  width: 271px;
  margin: auto;
}

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

&lt;div class=&quot;wrapper&quot;&gt;
  &lt;pre&gt;
                             _________
                            /        |
                          /          |
      __________________/()__________|
    {}_________________|___________=_|
   { }      ______     |           . |
 _{ #}_    /##  ##\    |             |
{______)__|##    ##|___|_____________|
            ##__##  \
&lt;/pre&gt;
  &lt;pre class=&quot;seat&quot;&gt;
_____________________________________________________
                                                    |
                                                    |
____________________________________________________|
__________________________________________________=_|
                                                  . |
                                                    |
____________________________________________________|
&lt;/pre&gt;
&lt;/div&gt;

<!-- end snippet -->

I have tried fload:right; but it did not work.

答案1

得分: 1

.wrapper {
  display: inline-grid;
  /* 使两列宽度相等 */
  grid-template-columns: auto auto;
}
英文:

Grid is the way to go when it comes to column-based interfaces:

.wrapper {
  display: inline-grid;
  /* Make two columns of equal width */
  grid-template-columns: auto auto;
}

Try it:

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

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

.wrapper {
  display: inline-grid;
  grid-template-columns: auto auto;
}


/* Original styles */

html, body {
  margin: 0;
  min-width: 100%;
  min-height: 100%;
}

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

&lt;div class=&quot;wrapper&quot;&gt;
  &lt;pre&gt;
                             _________
                            /        |
                          /          |
      __________________/()__________|
    {}_________________|___________=_|
   { }      ______     |           . |
 _{ #}_    /##  ##\    |             |
{______)__|##    ##|___|_____________|
            ##__##  \
&lt;/pre&gt;
  &lt;pre class=&quot;seat&quot;&gt;
_____________________________________________________
                                                    |
                                                    |
____________________________________________________|
__________________________________________________=_|
                                                  . |
                                                    |
____________________________________________________|
&lt;/pre&gt;
&lt;/div&gt;

<!-- end snippet -->

答案2

得分: 1

你可以通过为“.wrapper”类添加 display: flex; 属性并根据您的喜好设置填充和边距来实现这一点。

html, body {
  margin: 0;
  min-width: 100%;
  min-height: 100%;
}

.wrapper {
  display: flex;
  padding-top: 30vh;
  padding-left: 25vw;
  width: 271px;
  margin: auto;
}

<div class="wrapper">
  <pre>
                             _________
                            /        |
                          /          |
      __________________/()__________|
    {}_________________|___________=_|
   { }      ______     |           . |
 _{ #}_    /##  ##\    |             |
{______)__|##    ##|___|_____________|
            ##__##  \
  </pre>
  <pre class="seat">
_____________________________________________________
                                                    |
                                                    |
___________________________________________________|
__________________________________________________=_|
                                                  . |
                                                    |
___________________________________________________|
  </pre>
</div>
英文:

You can do so by giving the ".wrapper" class a display: flex; property and setting the padding and margin to your preference.

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

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

html, body {
  margin: 0;
  min-width: 100%;
  min-height: 100%;
}

.wrapper {
  display: flex;
  padding-top: 30vh;
  padding-left: 25vw;
  width: 271px;
  margin: auto;
}

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

&lt;div class=&quot;wrapper&quot;&gt;
  &lt;pre&gt;
                             _________
                            /        |
                          /          |
      __________________/()__________|
    {}_________________|___________=_|
   { }      ______     |           . |
 _{ #}_    /##  ##\    |             |
{______)__|##    ##|___|_____________|
            ##__##  \
&lt;/pre&gt;
  &lt;pre class=&quot;seat&quot;&gt;
_____________________________________________________
                                                    |
                                                    |
____________________________________________________|
__________________________________________________=_|
                                                  . |
                                                    |
____________________________________________________|
&lt;/pre&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月2日 01:56:13
  • 转载请务必保留本文链接：https://go.coder-hub.com/76384519.html
  • css
  • html
匿名

发表评论

匿名网友

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

确定