gpt4 book ai didi

html - 添加文本时 Div 移动,自动换行不起作用

转载 作者:行者123 更新时间:2023-11-28 02:39:04 24 4
gpt4 key购买 nike

我的目标是为少数图像创建一个 div(到目前为止它有效),右侧一些文本的 div 和底部文本的另一个 div。当我将文本添加到 missedletters div 时,它不知何故下降了,不知道为什么。我认为 display:inline-block 可能有一些东西这导致了困惑,但我不知道它是什么。

重要的 CSS:

body {
background-color: #303030;
font-family: 'Source Code Pro', monospace;
font-size: 28px;
}

body .arena {
min-height: 400px;
height: 50%;
width: 50%;
margin: auto;
margin-top: 11.5%;
background-color: darkseagreen;
border-radius: 15px;
}

.poorguy {
display: inline-block;
vertical-align: top;
margin-top: 12px;
min-width: 360px;
/* not sure if shouldn't be longer, but fits into it*/
min-height: 300px;
/* so i'll check it out in the process*/
bottom: 0px;
}

.missedletters {
vertical-align: top;
display: inline-block;
margin-top: 12px;
min-height: 320px;
min-width: 190px;
left: 0px;
bottom: 0px;
word-wrap: break-word;
}

.correctletters {
min-height: 80px;
vertical-align: top;
word-wrap: nowrap;
}
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>

<body>
<div class="background">
<div class="arena">
<div class="poorguy">
</div>
<div class="missedletters">
</div>
</div>
</div>
</body>

</html>

最佳答案

你只需要在你的 missedletters div 中添加一个 max-width/width。您可以使用 float: left; 而不是 display: inline-block;

关于html - 添加文本时 Div 移动,自动换行不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45449387/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com