gpt4 book ai didi

html - WebKit 中的水平网页

转载 作者:太空宇宙 更新时间:2023-11-03 19:19:35 26 4
gpt4 key购买 nike

我正在尝试创建一个类似于“The Horizontal Way”的网页。目标是在不设置body宽度的情况下,让所有的容器盒水平放置,而不是垂直放置。

Bellow 是我页面的基本版本。我也尝试过将 body 旋转 90 度的想法,但很快就遇到了限制。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
-webkit-box-sizing: border-box;
}
body {
position: absolute;
top: 0;
bottom: 0;
width: 4000px;
}
.box {
display: inline-block;
height: 99%;
width: 300px;
margin: 5px;
border: 1px solid #000;
background-color: #FBF;
-webkit-transition: all 500ms linear;
}
.box:hover {
width: 600px;
}
</style>
</head>
<body>
<div class="box">One</div>
<div class="box">Two</div>
<div class="box">Three</div>
</body>
</html>

我不关心在其他浏览器中的兼容性,但它必须在最新版本的 WebKit(Safari 5、Chrome 9 等)中工作。

edit: 查看基数 stylesheet for webkit我遇到了“-webkit-block-flow”属性。我找不到太多关于此的信息,但它可能会给我我正在寻找的行为。

最佳答案

对我来说,最简单的解决方案似乎是一个无序列表,其列表元素包含正文/内容。

关于html - WebKit 中的水平网页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4697198/

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