参见英文答案 >
Make a div 100% height of the browser window30个
适用于大多数浏览器的CSS是什么?
> 2 Divs – 50%和50%垂直填充整个屏幕.
>每个div水平分别为50%和50%,以填充1600px宽度.
<!-- TOP 50% --> <div class="top"> <div class="left">img</div> <div class="right">txt</div> </div> <!-- BOT 50% --> <div class="bot"> <div class="left">text</div> <div class="right">img</div> </div>
解决方法
目标:
你想要一个2 x 2网格的盒子.每个盒子的高度和宽度应为窗口的50%.这实际上比你想象的要容易得多.你不需要.left或.right,你不需要.top .bot.您只需要一个名为.row的类.
编辑:您在评论中提到您希望宽度固定为1600px;我们只需要为身体增加宽度.
码
HTML:
<!-- TOP 50% --> <div class="row"> <div>img</div> <div>txt</div> </div> <!-- BOT 50% --> <div class="row"> <div>text</div> <div>img</div> </div>
CSS:
html,body { padding:0; margin:0; height:100%; } body { width:1600px; } .row { width:100%; height:50%; } .row div { width:50%; height:100%; float:left; }
截图
这是来自下面的示例,但我添加了颜色以便于查看.
编辑:小提琴已更改为包含宽度.我的截图是在宽度之前,来演示.由于固定宽度,它看起来会更宽.
工作实例:
原文地址:https://www.jb51.cc/html/227542.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。