html - (HTML)(CSS) 为什么我的多列布局的左侧看起来比另一个小？-6ren

html - (HTML)(CSS) 为什么我的多列布局的左侧看起来比另一个小？

转载作者：行者123 更新时间：2023-11-28 02:08:26

25

4

https://jsfiddle.net/drqjmssy/

从 jsfiddle 链接，我试图让“div class='main_content'”与“div class='sidebar'”的垂直高度相同。如何做到这一点？如果您无法加载 fiddle 或它的格式很糟糕，这是我的代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>My project</title>
    <style>

        body {
            background-color: #5A4E3C;
            color: #E9EBBF;
        }

        header {
            background-color: #D8E472;
            padding: 2%;
        }

        nav {
            background-color: #D8E472;
        }

        footer {
            background-color: #D8E472;
            padding: 2%;
            color: #5A4E3C;
        }   

        h1 {
            color: #5A4E3C;
        }

        li {
            display: inline-block;
        }

        nav > ul {
            margin-top: 0;
            margin-bottom: 0;
        }

        .wrapper {
            width: 85%;
            background-color: #418E8E;
            margin: 0 auto;
        }

        .main_content {
            width: 56%;
            padding: 2%;
            column-count: 1;
            float: left;
            background-color: #418E8E;
            margin: 0;
        }

        .sidebar {
            width: 36%;
            padding: 2%;
            column-count: 1;
            float: left;
            background-color: #418E8E;
        }

    </style>
</head>
<body>

        <div class='wrapper'>

        <header>
            <h1>Main Heading</h1>
        </header>

        <nav>
            <ul>
                <li><a href='1.html'>Page 1</a></li>
                <li><a href='2.html'>Page 2</a></li>
            </ul>
        </nav>

        <div class='main_content'>
            <article>
                <h2>Subhead</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </article>
        </div>

        <div class='sidebar'>
            <article>
                <h2>Subhead</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </article>
        </div>

    <footer>
        &copy Yazen 2018.
    </footer>

    </div>

</body>
</html>

抱歉，如果其中任何内容令人困惑。//////////////////////////////////////////////////////////////////////////////

最佳答案

您可以将元素包装在一个新标签中(我使用了 section)并添加 display: flex。

body {
  background-color: #5A4E3C;
  color: #E9EBBF;
}

header {
  background-color: #D8E472;
  padding: 2%;
}

nav {
  background-color: #D8E472;
}

footer {
  background-color: #D8E472;
  padding: 2%;
  color: #5A4E3C;
}

h1 {
  color: #5A4E3C;
}

li {
  display: inline-block;
}

nav>ul {
  margin-top: 0;
  margin-bottom: 0;
}

.wrapper {
  width: 85%;
  background-color: #418E8E;
  margin: 0 auto;
}

.main_content {
  width: 56%;
  padding: 2%;
  column-count: 1;
  float: left;
  background-color: #418E8E;
  margin: 0;
}

.sidebar {
  width: 36%;
  padding: 2%;
  column-count: 1;
  float: left;
  background-color: #418E8E;
}

section {
  display: flex;
}

<div class='wrapper'>

  <header>
    <h1>Main Heading</h1>
  </header>

  <nav>
    <ul>
      <li><a href='1.html'>Page 1</a></li>
      <li><a href='2.html'>Page 2</a></li>
    </ul>
  </nav>
  <section>
    <div class='main_content'>
      <article>
        <h2>Subhead</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </article>
    </div>

    <div class='sidebar'>
      <article>
        <h2>Subhead</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </article>
    </div>
  </section>
  <footer>
    &copy Yazen 2018.
  </footer>

</div>

关于html - (HTML)(CSS) 为什么我的多列布局的左侧看起来比另一个小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48897321/

25

4

0

文章推荐： javascript - 在导入之前/期间/之后更改 DOM 节点的命名空间

文章推荐： javascript - Javascript 中的 Onkeyup 事件不起作用？

文章推荐： javascript - 将 vtype 添加到网格 EXT-JS 中的列

文章推荐： html - 显示 :none when rotating smartphone

css - 左侧、右侧和底部的阴影
我正在使用这段代码: border-right:0px solid #ddd; height:85px; box-shadow :5px 5px 10px 1px #eaeaea; 但我刚刚得到
html - 对齐图像旁边的文本(左侧)
我遇到的问题是将文本放在图像的左侧... HTML 和 CSS h2, social-hand { font-family: 'PT Sans', sans-serif; display: i
css - 文本未对齐居中，左侧
美好的一天我今天的 CSS 很糟糕。我有 3 列 div(水平，这就是我使用 float 的原因)，但我想将我的文本居中对齐，但在包含列 div 的左侧。 HTML:
android - 如何在android中裁剪imageview的顶部、左侧、右侧和底部
在我的应用程序中，我在截取屏幕截图时在我的 Imageview 中获得了透明像素。如何剪切顶部、左侧、右侧和 Imageview 的底部。我尝试了下面的代码但没有工作 Bitmap bitmap =
android - 左侧 LinearLayout 内部的边框
如何在左侧的以下 LinearLayout 内部添加边框，使其宽度为 5dp 并适合 LinearLayout 的整个高度？ LinearLayout 的高度是动态的，这意味着有时它可以是 50dp
html - 左侧 float 的下拉菜单和导航菜单变得模糊
我是第一次做网站。我在使用下拉菜单时遇到问题。它正在向左侧移动。请帮助我处理代码，使其位于导航菜单的正下方，并且将鼠标悬停在其上时应该可见。提前致谢。这是我的 CSS 代码: ul { li
html - 左侧 float 图像
我对 html 和 css 有点生疏，我无法让 2 个图像 float ，一个在另一个之上。这是代码... &nbs
html - 左侧 div 侧边栏动态向下延伸到底部
我有一个固定宽度 (px) 的左侧边栏，右侧是我的主要内容。这是我的演示:http://jsfiddle.net/fxWg7/4031/ 代码如下: 这是我的 html 代码: left co
javascript - 如何缓解 body 左侧？
所以我正在尝试做一个弹出式菜单，但我遇到了一点问题。我已经申请了: .menu-side, .menu { -webkit-transition: left 0.2s ease; -
css - 左侧 float 列表项的总宽度
在下面的 CSS @media screen and (max-width: 750px) { .flexbox { display: block; } .menu ul {
css - 尝试创建网站标题，左侧/顶部有一个小空间不会消失
@import 'https://fonts.googleapis.com/css?family=PT+Sans'; * { font-family: 'PT Sans', sans-serif
html - 将图标放在 H1 左侧
我想在我的标题旁边放一个图标。但它不合适..我怎样才能让它合适？ My heading 最佳答案使用vertical-align:middle，因此如果您更改文本或图像的大小，位
javascript - 以绝对位置居中图像(顶部，左侧)
我正在使用参数方程围绕一个圆定位图像 ( How do I calculate a point on a circle’s circumference? ) 我使用简单的数学方法以更少的方式完成此操作
css - 左侧 float 图像右侧的列表
我想使用外部列表属性将 ul 列表正确定位在左浮动 img 的右侧，但元素符号未在图像右侧对齐，因为没有任何图像，但更多在左边。 Lorem ipsum dolor sit amet, c
android - 以编程方式更改图层列表项目的顶部/右侧/底部/左侧
我有一个layer-list.xml 现在我想在运行时更改 (top,right) 等项目的
emacs - 如何在每次打开 Emacs 时启用行号(左侧)？
我通过按:M-x linum-mode 来启用它们。如何将其“翻译”到 my.emacs 文件中，以便每次打开 EMACS 时自动启用它？最佳答案如果您希望每个缓冲区都使用它，请将 (global
jquery - 无法手动更改可拖动 div 的顶部/左侧？
我的Code : HTML 1 2 3 CSS #score { height:50px; } .myDiv { width:40px; height:40px;
javascript - HTML5 Canvas 设置顶部/左侧
我可以轻松设置 canvas.width 和 canvas.height 属性。我找不到正确的 JavaScript 语法来使用顶部和左侧设置 Canvas 的偏移量。我尝试过直接在 Canvas 上
C# 循环扫描二维数组的顶部、底部、左侧、右侧元素
我正在尝试为我正在编写的单人纸牌游戏完成条件游戏。我把所有的 Action 和棋子都移除了。每一 block 都作为椭圆 UI 元素保存在一个二维数组中，当一 block 被拿走时，它会被替换为边框
android导航 View 菜单项之前(左侧)的空白空间
我正在使用导航 View 修改 Android 应用程序。对于前几个菜单项，我给出了一个图标，但之后，我只给出了菜单标题。但是在导航面板中，没有图标的菜单项有一个空白区域。如何删除空白区域？我希望菜

首页

博学

6Ren·AI

商城

html - (HTML)(CSS) 为什么我的多列布局的左侧看起来比另一个小？