div float和overflow隐藏的问题

时间：2018-04-18 20:10:44

标签： css

考虑以下小提琴，

https://jsfiddle.net/r5ttk64r/2/

HTML 

  <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">

    <link rel="stylesheet" href="../css/tabs.css">

</head>

<body>

    <div id="page-left">
        <h1>Hello World 1</h1>
    </div>

    <div id="page-right">
        <h1>Hello World 2</h1>
        <div id="tabsdiv">
            <div id="description" class="tab active"><span>DESCRIPTION</span></div>
            <div id="specification"  class="tab"><span>SPECIFICATION</span></div>
            <div id="prodfamily"  class="tab"><span>PRODUCT FAMILY</span></div>
            <div id="reviews"  class="tab"><span>REVIEWS & ARTICLES</span></div>
            <div id="showrooms"  class="tab"><span>SHOWROOMS</span></div>
        </div>

        <div id="tabcontentsdiv">



            <section id="specificationcontent" class="tabcontent active">

    
                <div id="content-left" class="specscolumn" style="height:auto; display:block; background:blue;">
                    <div style="display:block;" class="innerspecscolumn-left">
                        <p class="specname">TYPE</p>
                        <p class="specname">TYPE</p>
                        <p class="specname">TYPE</p>
                        <p class="specname">TYPE</p>

                        <p class="specname">TYPE</p>
                    </div>
                    <div class="innerspecscolumn-right">
                        <p class="specvalue">LED</p>
                    </div>
                </div>
                <div id="content-right" class="specscolumn">
                    <div class="innerspecscolumn-left">
                        <p class="specname">CERTIFICATION</p>
                    </div>
                    <div class="innerspecscolumn-right">
                        <p class="specvalue">ETL</p>
                    </div>
                </div>

            </section>

          
        </div>





    </div>

  
</body>

</html>

CSS 

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100vh;
}

body {
  font: 14px/1 'Open Sans', sans-serif;
  color: black;
  /*background: #eee;*/
}

h1 {
  padding: 50px 0;
  font-weight: 400;
  text-align: center;
}


#page-left {
    width: 35%;
    float: left;
    padding:40px;
}

#page-right {
    width: 65%;
    float: left;
    padding:40px;
}

section {
  display: none;
  padding: 45px 10px 20px 10px;
  border: 1px solid lightgray;
  margin-top: -30px;
  /*overflow: hidden;*/
}

#tabsdiv {
    background: lightgray;
    margin-right:10px;
    margin-left: 10px;
    height: 66px;
}

.tab {
    width: 20%;
    float:left;
    text-align: center;
    background:lightgray;
    border-width: 1px 1px 1px 0;
    border-color: grey;
    border-style: solid;   
    line-height: 66px;
}

.tab:first-of-type {
      border-left: 1px solid grey;
}

.tab:hover {
    cursor: pointer;
}

.tab.active {
  /*color: #555;*/
  /*border: 1px solid #ddd;*/
  /*border-top: 2px solid orange;*/
  /*border-bottom: 1px solid #fff;*/
  background:#99df5e;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


label {
  display: inline-block;
  margin: 0;
  padding: 25px 25px;
  font-weight: 600;
  text-align: center;
  /*color: #bbb;*/
  /*border: 1px solid transparent;*/
  background: lightgray;
  width:19.9%;
}

.tabcontent.active
{
  display: block;
}

.specscolumn {
    width: 50%;
    float:left;
}

#content-left {
    padding-right: 10px;
}

#content-right {
   padding-left: 10px;
}

.innerspecscolumn-left {
    width: 50%;
    float:left;
}

.innerspecscolumn-right {
    width: 50%;
    float:right;
    text-align: right;
}

.specname {
    font-weight: bold;
}



@media screen and (max-width: 650px) {
  label {
    font-size: 0;
  }
  label:before {
    margin: 0;
    font-size: 18px;
  }
}

@media screen and (max-width: 400px) {
  label {
    padding: 15px;
  }
}

我一直试图让边框随着蓝框的高度而扩大。

使div显示：块不起作用。 将该部分设为溢出：隐藏确实使边框延伸但是将边框向下拉。我需要这个margin-top：-30px到位，所以边框看起来像是从标签出来而不是从它下面开始。

有什么想法吗？

1 个答案:

答案 0 :(得分：2)

我不知道我是否做对了。一种可能的解决方案是使用clearfix技术。如果你想要一些元素来保持＆＃34;内部元素＆＃34;浮动＆＃34;在里面，使用这个片段：

.clearfix::after {
    display: block;
    content: "";
    clear: both;
}

＆＃13;
＆＃13; 
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100vh;
}

body {
  font: 14px/1 'Open Sans', sans-serif;
  color: black;
  /*background: #eee;*/
}

.clearfix::after {
  display: block;
    content: "";
    clear: both;
}

h1 {
  padding: 50px 0;
  font-weight: 400;
  text-align: center;
}


#page-left {
    width: 35%;
    float: left;
    padding:40px;
}

#page-right {
    width: 65%;
    float: left;
    padding:40px;
}

section {
  display: none;
  padding: 45px 10px 20px 10px;
  border: 1px solid lightgray;
  margin-top: -30px;
  /*overflow: hidden;*/
}

#tabsdiv {
    background: lightgray;
    margin-right:10px;
    margin-left: 10px;
    height: 66px;
}

.tab {
    width: 20%;
    float:left;
    text-align: center;
    background:lightgray;
    border-width: 1px 1px 1px 0;
    border-color: grey;
    border-style: solid;   
    line-height: 66px;
}

.tab:first-of-type {
      border-left: 1px solid grey;
}

.tab:hover {
    cursor: pointer;
}

.tab.active {
  /*color: #555;*/
  /*border: 1px solid #ddd;*/
  /*border-top: 2px solid orange;*/
  /*border-bottom: 1px solid #fff;*/
  background:#99df5e;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


label {
  display: inline-block;
  margin: 0;
  padding: 25px 25px;
  font-weight: 600;
  text-align: center;
  /*color: #bbb;*/
  /*border: 1px solid transparent;*/
  background: lightgray;
  width:19.9%;
}

.tabcontent.active
{
  display: block;
}

.specscolumn {
    width: 50%;
    float:left;
}

#content-left {
    padding-right: 10px;
}

#content-right {
   padding-left: 10px;
}

.innerspecscolumn-left {
    width: 50%;
    float:left;
}

.innerspecscolumn-right {
    width: 50%;
    float:right;
    text-align: right;
}

.specname {
    font-weight: bold;
}



@media screen and (max-width: 650px) {
  label {
    font-size: 0;
  }
  label:before {
    margin: 0;
    font-size: 18px;
  }
}

@media screen and (max-width: 400px) {
  label {
    padding: 15px;
  }
}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
        
        
    <div id="page-left">
        <h1>Hello World 1</h1>
    </div>

    <div id="page-right">
        <h1>Hello World 2</h1>
        <div id="tabsdiv">
            <div id="description" class="tab active"><span>DESCRIPTION</span></div>
            <div id="specification"  class="tab"><span>SPECIFICATION</span></div>
            <div id="prodfamily"  class="tab"><span>PRODUCT FAMILY</span></div>
            <div id="reviews"  class="tab"><span>REVIEWS & ARTICLES</span></div>
            <div id="showrooms"  class="tab"><span>SHOWROOMS</span></div>
        </div>

        <div id="tabcontentsdiv">



            <section id="specificationcontent" class="tabcontent active clearfix">

    
                <div id="content-left" class="specscolumn" style="height:auto; display:block; background:blue;">
                    <div style="display:block;" class="innerspecscolumn-left">
                        <p class="specname">TYPE</p>
                        <p class="specname">TYPE</p>
                        <p class="specname">TYPE</p>
                        <p class="specname">TYPE</p>

                        <p class="specname">TYPE</p>
                    </div>
                    <div class="innerspecscolumn-right">
                        <p class="specvalue">LED</p>
                    </div>
                </div>
                <div id="content-right" class="specscolumn">
                    <div class="innerspecscolumn-left">
                        <p class="specname">CERTIFICATION</p>
                    </div>
                    <div class="innerspecscolumn-right">
                        <p class="specvalue">ETL</p>
                    </div>
                </div>

            </section>

          
        </div>





    </div>
＆＃13;
＆＃13;
＆＃13;

因此，在您的情况下，只需将课程clearfix添加到specificationcontent。

相关问题
最新问题