CSS

Question

嗯，现在我已经解决了这个问题，我想调整＆＃34; c2＆＃34;但当我将它设置为X时，它会改变＆＃34; c1＆＃34; div margin：S

以下是我使用的代码：

<header>
    <div class="jumbotron">
        <center><h1>Bienvenidos a JVasconcelos.me</h1></center>
    </div>
</header>
<div class="container">
    <div class="row">
        <div class="col-md-12 col-centered">
            <div class="c1">
                <div class="c2">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis inventore illum quaerat laboriosam eos, vel sed suscipit cumque laborum est animi aliquid tempora iusto beatae quam quisquam porro dolore! Ullam tenetur doloribus ducimus, totam voluptatum, deleniti vero voluptatem eius architecto velit neque voluptas aliquam quidem sed eveniet! Nobis ex eos iste dolorum tempora doloremque non deleniti, aperiam quibusdam corrupti officia consequatur, impedit. Exercitationem debitis iste voluptatum, illo nulla iure culpa ex fugit, aliquid dolorem excepturi, impedit voluptates quae quidem error earum natus, provident eum vitae. Tempore ducimus laborum voluptates, qui aspernatur odit dolorum modi quas cupiditate unde quam earum amet!
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

div.c1 { height: 100vh; background: #417ba1; margin-top: -30px; padding: 0px 30px; }
div.c2 { height: 90%; background: #fff; margin-top: 0px; padding: 60px 30px; }
.jumbotron { background: url("../img/header_bg.png") no-repeat; height: 100%; }

Answer 1

阿。你正在寻找

 [{u'Fields': [],
  u'ReportDate': u'2 June 2016',
  u'ReportID': u'BalanceSheet',
  u'ReportName': u'Balance Sheet',
  u'ReportTitles': [u'Balance Sheet',
                    u'Test Company',
                    u'As at 30 June 2016'],
  u'ReportType': u'BalanceSheet',
  u'Rows': [{u'Cells': [{u'Value': u''},
                        {u'Value': u'30 Jun 2016'},
                        {u'Value': u'30 Jun 2015'}],
             u'RowType': u'Header'},
            {u'RowType': u'Section', u'Rows': [], u'Title': u'Assets'},
            {u'RowType': u'Section',
             u'Rows': [{u'Cells': [{u'Attributes': [{u'Id': u'account',
                                                     u'Value': u'c0bxx922-cc31-4d53-b060-cbf23511`2533'}],
                                    u'Value': u'Test Bank 1'},
                                   {u'Attributes': [{u'Id': u'account',
                                                     u'Value': u'c1b4xx22-cc31-4d53-b060-cb45282533'}],
                                    u'Value': u'5555.20'},
                                   {u'Attributes': [{u'Id': u'account',
                                                     u'Value': u'c2b44922-cc31-4d53-b060-cbf4532582533'}],
                                    u'Value': u'5555.20'}],
                        u'RowType': u'Row'},
                       {u'Cells': [{u'Attributes': [{u'Id': u'account',
                                                     u'Value': u'290c7c3c-a712-4ads6f-9a2f-3d5258aad5a9e'}],
                                    u'Value': u'Test Bank 2'},
                                   {u'Attributes': [{u'Id': u'account',
                                                     u'Value': u'490c7c32-axxxdf6f-9a2f-3db682a3ad5a9e'}],
                                    u'Value': u'55555.20'},
                                   {u'Attributes': [{u'Id': u'account',
                                                     u'Value': u'490xxc3c-a71-adsf6f-9a2f-3d3aad5a9e'}],
                                    u'Value': u'55555.20'}],
                        u'RowType': u'Row'},
                       {u'Cells': [{u'Attributes': [{u'Id': u'account',
                                                     u'Value': u'c6d4da40-f0df1b0-8f7d-xx45b1405'}],
                                    u'Value': u'Test Bank 3'},
                                   {u'Attributes': [{u'Id': u'account',
                                                     u'Value': u'c6d4da4fg-df-41b0-8f7d-54xx345b1405'}],
                                    u'Value': u'5555.20'},
                                   {u'Attributes': [{u'Id': u'account',
                                                     u'Value': u'c6d4dafgss-9-41b0-8f7d-60xx5b1405'}],
                                    u'Value': u'5555.20'}],
                        u'RowType': u'Row'},
                    {u'Cells': [{u'Value': u'Total Cash and Cash Equivalents'},
                                {u'Value': u'5555555.20'},
                                {u'Value': u'5555555.20'}],
                     u'RowType': u'SummaryRow'}],
          u'Title': u'Cash and Cash Equivalents'},
         {u'RowType': u'Section',

此行为是由于框模型规范的collapsing margins部分所致。将.c1 { overflow: auto; // or hidden or overlay }放在父级上会建立一个新的块格式化上下文并阻止边距折叠。

Answer 2

这是因为c1和c2的边界是collapsing。您必须隐藏overflow（包含overflow: hidden或与容器默认的任何溢出（可见），以避免c1也获得margin { {1}}。

＆＃13;

c2

＆＃13;

div.c1 { height: 100vh; background: #417ba1; overflow: hidden; margin-top: -30px; padding: 0px 30px; }
div.c2 { height: 90%; background: #fff; margin-top: 20px; padding: 60px 30px; }
.jumbotron { background: url("../img/header_bg.png") no-repeat; height: 100%; }

＆＃13;

Answer 3

我认为你的意思是当你改变div.c2上的margin-top时你的div.c1也会向下移动。这是由于div + div结构的默认定义。

要实现您想要的功能，您需要在div.c1上创建以下额外的css定义：

display: inline-block;

看看这个codepen：http://codepen.io/anon/pen/beNjbW

Answer 4

由于可折叠的边距，将呈现c1或c2的差异或更大的差距。

在这种情况下，您的总距离将为0（它们相互抵消）：

div.c1 {
  margin-top: -30px;
}

div.c2 {
  margin-top: 30px;
}

在这种情况下，您的距离将从顶部开始10px：

div.c1 {
  margin-top: -30px;
}

div.c2 {
  margin-top: 40px;
}

在这种情况下，可以省略一个上边距。您可以通过调整任一个

的margin-top来控制到标题的距离

codePen example

只需1个div即可调整保证金

CSS

4 个答案: