gpt4 book ai didi

html - 如何使 div 容器扩展到带有水平滚动条的整个 HTML 页面

转载 作者:行者123 更新时间:2023-11-28 08:38:06 26 4
gpt4 key购买 nike

我希望 div 容器通过水平滚动条扩展到整个 HTML 页面,这是一张显示我的问题的图片。

Image

当需要水平滚动条时,div 容器不会扩展。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type='text/x-mathjax-config'>
MathJax.Hub.Config({
showMathMenu: false,
jax: ['input/TeX','output/HTML-CSS'],
displayAlign: "left",
extensions: ['tex2jax.js','toMathML.js'],
TeX: { extensions: ['AMSmath.js','AMSsymbols.js','noErrors.js','noUndefined.js'] },
});
</script>
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js"></script>
<style>
.titulo{
width:100%;
border-bottom:solid 2px;
border-color: black;
background-color:lightgrey;
font-family:arial;
font-weight:bold;
white-space:nowrap;
}
</style>
</head>

<body>
<div class="titulo">Data</div>
<div>$$\vec{v_r}=\vec{v_1}+\vec{v_2}\\\vec{v_r}=\left(x_1+x_2,\;y_1+y_2\right)$$</span>
<div class="titulo">Operations</div>
<div>$$\vec{v_1}=\left(1000000,\;3000000\right)\\\vec{v_2}=\left(500000,\;2000000\right)\\\vec{v_1}=\left(1000000,\;3000000\right)\\\vec{v_2}=\left(500000,\;2000000\right)\\\vec{v_1}=\left(1000000,\;3000000\right)\\\vec{v_2}=\left(500000,\;2000000\right)\\\vec{v_r}=\left(1000000,\;3000000\right)+\left(500000,\;2000000\right)\\\vec{v_r}=\left(1000000+500000,\;3000000+2000000\right)\\\vec{v_r}=\left(1500000,\;5000000\right)$$</div>
</body>
</html>

我该如何解决这个问题?我用MathJax显示数学公式,不知道有没有干扰。

最佳答案

当您为外部 div 提供 width:100% 时,它会占用 100% 的窗口/文档宽度。 但是因为您的 1 div 文本不是 wrapping(中间没有空格),这样 div 就会离开 viewport,这样你就会得到 水平滚动条。所以为了避免包装你的文字,例如。 word-wrap: break-word; 在文本输出的位置使用此 css 属性

enter image description here

关于html - 如何使 div 容器扩展到带有水平滚动条的整个 HTML 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27933310/

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