html - 如何将最小宽度和最大宽度与包装器结合起来？-6ren

html - 如何将最小宽度和最大宽度与包装器结合起来？

转载作者：行者123 更新时间：2023-11-28 07:04:13

25

4

我已经成功地使用包装器使我的 2 列布局居中。我也想让它以某种方式响应，所以我考虑使用最小和最大宽度值。但是一旦我插入它们，布局就会中断并且不再居中。

有什么建议吗？还是我应该寻找一种完全不同的方法？

这是基本的 HTML:

<body>
<div id="wrapper">
    <div id="content">
        <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
    </div>
    <div id="sidebar">
        <div id="sidebarfix">
            <nav>
                <li><a class="navlink"; href="">Link 1</a></li>
                <li><a class="navlink"; href="">Link 2</a></li>
                <li><a class="navlink"; href="">Link 3</a></li>
                <li><a class="navlink"; href="">Link 4</a></li>
            </nav>
        </div>
    </div>
</div>

这是 CSS:

body {
background-color: #EFEFEF;
margin: 0;
padding: 0;
}

#wrapper {
width: 600px;
padding: 0;
margin: 0 auto;
}

#content {
background-color: #FFFFFF;
width: 300px;
float: left;
position: relative;
padding: 0 2.5em 0 2.5em;
margin: 0;
}

#sidebar {
width: 200px;
float: right;
text-align: center;
background-color: #FFFFFF;
padding: 0;
margin: 0 0 0 5px;
}

#sidebarfix {
background-color: #FFFFFF;
width: 200px;
position: fixed;
padding: 0;
margin: 0;
}

到这里获取完整的 JSFiddle:https://jsfiddle.net/timothys_monster/0db4sL6d/12/

最佳答案

好吧，我建议使用 bootstrap，它的 grate 框架可以节省很多时间。但是如果你想自己写它在很大程度上取决于你想做什么样的布局。如果你想制作标准的盒装布局，你可以简单地为 body 指定固定宽度

喜欢

body {width: 860px; background-color: black; margin: 0px auto;}
html {background-color: white;}

然后你可以玩 % width 也可以使用 @media screen 。但最好的方法是简单地添加 Bootstrap。

Bootstrap
Media rule

关于html - 如何将最小宽度和最大宽度与包装器结合起来？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33055560/

25

4

0

文章推荐： swift - 在 SpriteKit 中附加 SpriteNode

文章推荐： swift - 在结构中搜索，传递数组的索引？

文章推荐： javascript - 检查项目是否位于每个助手中的最后一个

Haskell - 如何将最大值 (xs++ map (x+) xs) 转换为 max (最大 xs) (x + 最大 xs)
“用 Haskell 进行函数式思考”中的练习之一是使用融合定律使程序更加高效。我在尝试复制答案时遇到了一些麻烦。部分计算要求您将 maximum (xs++ map (x+) xs) 转换为 ma
R 最大/最小可表示数
我正在尝试获得 R 中最大/最小的可表示数字。输入“.Machine”后我有: $double.xmin [1] 2.225074e-308 $double.xmax [1] 1.797693e+
javascript - 浏览器验证消息最小/最大
有没有办法更改浏览器验证消息请检查所附图片。我目前正在使用 wooCommerce 目前它显示小于或等于 X 个数字，我想更改为请求超过 X 个项目的报价。请多多指教最佳答案您需要使用oni
R - 优化(最大)
我正在尝试将解决方案从 Excel 求解器复制到 R 中，但不知道从哪里开始。问题: 每小时选择 5 个选项(5 行)，以最大化“分数”的总和，而无需在多个小时内选择同一组 2 次。换句话说: 最
Haskell:最大/最小函数
Haskell 中是否有这样的功能: max_of_type :: (Num a) => a 所以: max_of_type :: Int == 2 ^ 31 - 1 // for example,
javascript - 控制输入数字字段最小/最大
我有这两个表示时间范围(秒)的输入字段，我需要这样设置，以便“from/min”字段不能高于“to/max”，反之亦然。到目前为止我得到了这个: jQuery(document).ready(fun
MySQL-获取一系列行中连续事件的最小/最大
我有一个看起来像这样的表: http://sqlfiddle.com/#!9/152d2/1/0 CREATE TABLE Table1 ( id int, value decimal(10,
mysql - 从多个项目中选择最小/最大
我会尝试尽可能简单地解释它: 首先是一些带有虚拟数据的数据库结构。结构 tb_spec_fk feature value ----------------- 1 1 1
mysql - 一对多加入聚合函数(最大)
我有两个表。表 1: +---------+---------+ | Lead_ID | Deal_ID | +---------+---------+ | 2323 | null |
MySQL - 最小/最大
我的数据库中有一个字段可以包含数字，例如8.00 或范围编号，例如8.00 - 10.00。如果您将每个数字作为单独的数字，我需要从表中获取 MIN() 和 MAX()。例如当范围为 8.00 -
Python:最大/最小内置函数取决于参数顺序
max(float('nan'), 1) 计算结果为 nan max(1, float('nan')) 计算结果为 1 这是预期的行为吗？感谢您的回答。 max 在 iterable 为空时引发异常
html - 最大/最小宽度使用最大可能宽度
我想问一下如何在 CSS 中创建一个页脚栏，它具有最小宽度(比如 650 像素)，并且会根据窗口大小进行拉伸(stretch)，但仅限于某个点(比如 1024 像素)。我的意思是当窗口大小为例如 1
css - 最大/最小宽度属性不适用于目标列
我尝试调整表格列宽(下一个链接上的“作者”列 http://deploy.jtalks.org/jcommune/branches/1?lang=en)。我已将最小/最大属性添加到 .author-c
c# - 最大/最小对象
在 C# 中，是否有用于将最小值和最大值存储为 double 值的内置类？此处列出的要点 http://msdn.microsoft.com/en-us/library/system.windows
python - 最大 GAE任务队列处理率
问题: 每个任务队列是否可以每秒处理超过 500 个任务？每个 GAE 应用是否可以每秒处理超过 50,000 个任务？详细信息: Task queue quota文档说: Push Queue
java - 最大/最小堆树可以包含重复值吗？
我想知道是否允许最大或最小堆树具有重复值？我试图仅通过在线资源查找与此相关的信息，但一直没有成功。最佳答案是的，他们可以。您可以在“算法简介”(Charles E. Leiserson、Cliff
powershell 最大/第一个/聚合函数
首先，我是 .NET 开发人员，喜欢 C# 中的 LINQ 和扩展方法。但是当我编写脚本时，我需要相当于 Enumerable extension methods 的东西任何人都可以给我任何建议/
c++ - 最大 malloc 大小低于预期
这是一个检查最大 malloc 大小的简单程序: #include std::size_t maxDataSize = 2097152000; //2000mb void MallocTest(vo
awk - 我的第一个脚本中的语法错误。(最小，最大)
我想找到我的数据的最小值和最大值。我的数据文件: 1 2 4 5 -3 -13 112 -3 55 42 42 而我的脚本: {min=max=$1} {if ($1max) {max=$1}
php - 如何为ElasticSearch聚合添加条件(最小/最大)？
我想查询我的Elastic-Search以获取仅具有正值的最低价格价格。我的价格也可以为零和-1；所以我不希望我的最小聚合返回0或-1。我知道我应该向查询(或过滤器)添加脚本，但是我不知道如何。我当前

首页

博学

6Ren·AI

商城

html - 如何将最小宽度和最大宽度与包装器结合起来？