html - 三分之一和三分之二的列不会相互对齐

标签 html css skeleton-css-boilerplate

我一直在使用骨架框架,这是我的代码:

<html>
<head>
    <title></title>
    <link rel="stylesheet" href="stylesheets_skeleton/skeleton.css">
</head>
<body class = "container sixteen columns" style = "height : 400px; border: solid 1px;">
    <div class = "two-thirds column" style = "height: 200px; border: solid 1px; float: left;">

    </div>
    <div class = "one-third column" style = "height: 200px; border: solid 1px; float: right;">

    </div>

</body>

我得到这个输出:

enter image description here

虽然我的预期输出是这样的:

enter image description here

请帮忙,谢谢:)

最佳答案

这可能对你有帮助

 <html>
    <head>
        <title></title>
        <link rel="stylesheet" href="stylesheets_skeleton/skeleton.css">
    </head>
    <body class = "container sixteen columns" style = "height : 400px; border: solid 1px;">
    <div style="width:100%; float:left;">
        <div class = "two-thirds column" style = "height: 200px; border: solid 1px; float: left;">

        </div>
        <div class = "one-third column" style = "height: 200px; border: solid 1px; float: right;">

        </div>
    </div>
    </body>
</html>

关于html - 三分之一和三分之二的列不会相互对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22370528/

相关文章:

java - 为什么我们需要 JSF 标签,如果我们有 HTML 标签

javascript - 带有 - 的 CSS 选择器作为操作符

HTML + CSS : Numbered list with numbers inside of circles

css骨架框架让所有列都适合在同一行

html - 如何使用 Skeleton CSS 框架更改表格大小

html - 他是如何让侧边栏保持在左侧的,即使页面的右侧可以滚动?

jquery - 带 JQuery Mobile 的粘性页脚

html - 图片元素、响应式图像、webp 图像和 safari 后备不起作用

css - IE 8 及以下版本在浏览器缩放时错误地调整 iframe 内容的大小

html - div中的居中对齐文本框