英文:
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 -->
<div class="wrapper">
<pre>
_________
/ |
/ |
__________________/()__________|
{}_________________|___________=_|
{ } ______ | . |
_{ #}_ /## ##\ | |
{______)__|## ##|___|_____________|
##__## \
</pre>
<pre class="seat">
_____________________________________________________
|
|
____________________________________________________|
__________________________________________________=_|
. |
|
____________________________________________________|
</pre>
</div>
<!-- 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 -->
<div class="wrapper">
<pre>
_________
/ |
/ |
__________________/()__________|
{}_________________|___________=_|
{ } ______ | . |
_{ #}_ /## ##\ | |
{______)__|## ##|___|_____________|
##__## \
</pre>
<pre class="seat">
_____________________________________________________
|
|
____________________________________________________|
__________________________________________________=_|
. |
|
____________________________________________________|
</pre>
</div>
<!-- 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 -->
<div class="wrapper">
<pre>
_________
/ |
/ |
__________________/()__________|
{}_________________|___________=_|
{ } ______ | . |
_{ #}_ /## ##\ | |
{______)__|## ##|___|_____________|
##__## \
</pre>
<pre class="seat">
_____________________________________________________
|
|
____________________________________________________|
__________________________________________________=_|
. |
|
____________________________________________________|
</pre>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论