响应50%2列html/css_Html_Css - Fatal编程技术网

响应50%2列html/css

html css

响应50%2列html/css,html,css,Html,Css,我怀疑我想要实现的可能不可能是简单的HTML/CSS，但不管怎样，还是这样。我想要一个2列的布局，它可以很好地包装在移动设备上。如果有空间，每列占容器宽度的50%，但如果它们包裹，则占容器宽度的100% 以下是一些标记示例： <!doctype html> <html xml:lang="en-gb" lang="en-gb" > <head> <title>Responsive 2 col</title> <st

我怀疑我想要实现的可能不可能是简单的HTML/CSS，但不管怎样，还是这样。我想要一个2列的布局，它可以很好地包装在移动设备上。如果有空间，每列占容器宽度的50%，但如果它们包裹，则占容器宽度的100%

以下是一些标记示例：

<!doctype html>
<html xml:lang="en-gb" lang="en-gb" >
<head>
    <title>Responsive 2 col</title>
    <style type="text/css">
        .colcontainer
        {
            width: auto;
            overflow:hidden;
            border: solid 1px red;
        }
        .leftcol
        {
            width: 49%;
            float: left;
            margin-right:10px;
            border: solid 1px blue;
        }
        .rightcol
        {
            width: 49%;
            float: left;
            border: solid 1px green;
        }
    </style>
</head>
<body>
    <div class="colcontainer">
        <div class="leftcol">
            Here is a paragraph which has enough text to cause it to take up a fair amount of width if left to its own devices.
        </div>
        <div class="rightcol">
            A smaller paragraph.
        </div>
    </div>
</body>


响应2列
colcontainer先生
{
宽度：自动；
溢出：隐藏；
边框：实心1px红色；
}
leftcol先生
{
宽度：49%；
浮动：左；
右边距：10px；
边框：纯色1px蓝色；
}
rightcol先生
{
宽度：49%；
浮动：左；
边框：实心1px绿色；
}
这是一个段落，它有足够的文本，如果让它自己处理，它会占据相当大的宽度。
一小段。

这看起来还可以，但是当您挤压浏览器宽度以使div包裹时，它们仍然只占容器宽度的50%。通过删除宽度：49%，它可以很好地包裹并填充可用的宽度，但不包裹时，列不再均匀分割。有没有办法让它们在包装时填满可用宽度，但在未包装时占据50%的可用宽度？

您需要多个东西，首先您要制作一个响应网格，所以无论何时制作响应网格，请确保使用下面的CSS片段

* {
   margin: 0;
   padding: 0;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

这将更改长方体模型行为，并将计算长方体内部而非外部的

填充

和

边框
其次，如果要包装元素，可以使用@media
查询声明断点，这样它们就不会被压扁
（调整窗口大小并查看效果）
是否有其他适用的CSS规则，此处未显示？另外，为什么要在标记中设置元素的样式？您正在使用媒体查询吗？另外，使用box size:border-boxI将CSS放在页面中纯粹是为了制作一个简单的示例。实际上，CSS位于单独的文件中。没有其他相关的样式规则-上面的示例说明了问题。我希望避免为不同的设备使用不同的样式表。