Question

好吧所以我有一组四个不同大小的div，并希望将它们直接显示在彼此之下，而它们之间没有这么大的间隙。编辑：更改了css，以便在运行代码时问题更加直观。 My problem

section.season{position:relative;top:5px;left:50%;transform:translateX(-50%);width:100%;max-width:1000px;}
section.season div{float:left;position:relative;background:rgba(217,217,209, 0.2);margin-top:15px;padding:10px;}

section.season ul{display:block;list-style:none;width:100%;}
section.season div.season ul{display:block;}
section.season div.season ul.show{display:block;}
section.season ul li{width:100%;margin-bottom:2px;}
section.season ul li a{padding-left:10px;display:block;background:rgba(217,217,209, 0.2);}
section.season ul li a:hover{background:rgba(25,25,30, 0.4);}

section.season div.season{width:40%;}

<section class='season'>
<div class='season notrans rightp'>
          <a href='javascript:void()' onclick='toggleSeason(1);'>
            <h4 class='notrans'>Div 1</h4></a>
          <ul id='season1'>
          <li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li></ul></div>        <div class='season notrans'>
          <a href='javascript:void()' onclick='toggleSeason(2);'>
            <h4 class='notrans'>Div 2</h4></a>
          <ul id='season2'>
          <li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li></ul></div>        <div class='season notrans rightp'>
          <a href='javascript:void()' onclick='toggleSeason(3);'>
            <h4 class='notrans'>Div 3</h4></a>
          <ul id='season3'>
          <li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li></ul></div>        <div class='season notrans'>
          <a href='javascript:void()' onclick='toggleSeason(4);'>
            <h4 class='notrans'>Div 4</h4></a>
          <ul id='season4'>
          <li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li></ul></div>        <div class='season notrans rightp'>
          <a href='javascript:void()' onclick='toggleSeason(5);'>
            <h4 class='notrans'>Div 5</h4></a>
          <ul id='season5'>
          <li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li></ul></div>        <div class='season notrans'>
          <a href='javascript:void()' onclick='toggleSeason(6);'>
            <h4 class='notrans'>Div 6</h4></a>
          <ul id='season6'>
          <li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li></ul></div>        <div class='season notrans rightp'>
          <a href='javascript:void()' onclick='toggleSeason(7);'>
            <h4 class='notrans'>Div 7</h4></a>
          <ul id='season7'>
          </ul></div></div>
    </section>

Answer 1

最佳做法：在Chrome中打开您的日志并检查样式部分，看看是什么原因导致CSS产生差距。在Chrome中右键单击您的浏览器并选择Inspect，然后在右侧部分查看样式属性。确定问题，然后在CSS中相应地调整代码。

Hack：如果您无法调整或找到导致不需要的填充/边距的父CSS，请在内联样式中添加覆盖...使用不良内容嵌入：<style> -> classitem {margin-top:0px !important;}或更好：内联{{1} } Implications of using !important

编辑：下午5:57

经过进一步检查后，我相信您的问题很可能是您的div的结构，虽然您没有在示例代码更新中显示这一点，但您只向我们展示了您的一个div和几行css。你有一个边界问题，而不是CSS。我假设你有两个div叠加在一起，每个div的父div的宽度是否正确？

*你需要构造两个div并使用你想要的任何方法并行浮动它们，bootstrap或纯css，js，等等。在两个水平放置的div中的每一个内，将另外两个div放在彼此的顶部。这将允许您将每个容器并排放置在彼此之上，而没有水平div限制。在这里使用纯CSS查看此示例： Check out the code on JFiddle

或者考虑修改代码，同时显示所有四个div及其包含的div代码。

Answer 2

给你的部分一个与所有部分相匹配的最小高度。

section.season div.season {width：40％; min-height：400px;}

所以它没有达到不同的高度。

div直接在兄弟姐妹下面和兄弟姐妹旁边

2 个答案: