删除div之间的边框

时间：2016-11-10 08:32:51

标签： html css

我有以下HTML页面 - 

<body>
<div class="blue" ></div>
<div style="padding-bottom: 0; margin-bottom: 0; display: inline-block" >
<div class="yellow"  style="border-right: none" ></div>
<div class="red"></div>
<div class="yellow"></div>
</div> 
<div class="green"></div>  
</body>

css - 

.blue{
    background-color: blue;
    width: 800;
    height: 100
}
.yellow{
    background-color: yellow;
    width: 150;
    height: 400;
    display:inline-block;
border-right: 0;
    border-bottom: none;

}

.red{
    background-color: red ;
    width: 500;
    height: 400;
    display: inline-block;
    padding: 0;
    border: none;
}
.green{
    background-color: green;
    width: 800;
    height: 100;
border-bottom:2px solid black;
    margin-top: 0;
    padding: 0;
    border-top: none; 
}

如何删除黄色div和红色之间的边框？ 我需要的盒子没有内部边框。 （所有div框都将关闭。

8 个答案:

答案 0 :(得分：0)

＆＃13;
＆＃13; 
.blue {
  background-color: blue;
  width: 800px;
  height: 100px;
}

.container {
  display: flex;
}

.yellow {
  background-color: yellow;
  width: 150px;
  height: 400px;
  display: inline-block;
  border-right: 0;
  border-bottom: none;
}

.red {
  background-color: red;
  width: 500px;
  height: 400px;
  display: inline-block;
  padding: 0;
  border: none;
}

.green {
  background-color: green;
  width: 800px;
  height: 100px;
  border-bottom: 2px solid black;
  margin-top: 0;
  padding: 0;
  border-top: none;
}
＆＃13; 
<div class="blue"></div>
<div class="container">
  <div class="yellow" style="border-right: none"></div>
  <div class="red"></div>
  <div class="yellow"></div>
</div>
<div class="green"></div>
＆＃13;
＆＃13;
＆＃13;

我只需在黄色和红色的父元素上添加display：flex。而不是内联块

答案 1 :(得分：0)

<style type="text/css">
.blue{
    background-color: blue;
    width: 800;
    height: 100
}
.yellow{
    background-color: yellow;
    width: 150;
    height: 400;
    display:inline-block;
    border-right: 0;
    border-bottom: none;

}

.red{
    background-color: red ;
    width: 500;
    height: 400;
    display: inline-block;
    padding: 0;
    border: none;
}
.green{
    background-color: green;
    width: 800;
    height: 100;
border-bottom:2px solid black;
    margin-top: 0;
    padding: 0;
    border-top: none; 
}
</style>

<body>
<div class="blue" ></div>
<div style="padding-bottom: 0; margin-bottom: 0; display: inline-block; font-size:0;" >
<div class="yellow"  style="border-right: none; font-size:0;" ></div>
<div class="red"></div>
<div class="yellow"></div>
</div> 
<div class="green"></div>  
</body>

我添加了font-size：0。这是一种解决方法。

答案 2 :(得分：0)

另一种方式是评论div的每一端，就像这样：

<body>
<div class="blue" ></div>
<div style="padding-bottom: 0; margin-bottom: 0; display: inline-block" >
<div class="yellow"  style="border-right: none" ></div><!-- a 
--><div class="red"></div><!-- 
--><div class="yellow"></div>
</div> 
<div class="green"></div>  
</body>

我在yellow之后发表评论，并在red之前将其关闭。

答案 3 :(得分：0)

检查此代码段...

＆＃13;
＆＃13; 
<int-jpa:updating-outbound-gateway native-query="insert into PARTNER_RESPONSE_DETAILS(PARTNER_ID,BANK_REFERENCE_NUMBER,REQUEST_STRING,RESPONSE_STRING,RESPONSE_DATE) values (:partnerId,:bankReferenceNumber,:requestString,:responseString,:responseDate)"
entity-manager="entityManager">
 <int-jpa:transactional />
 <int-jpa:parameter name="partnerId" 			expression="payload['partnerId']" />
 <int-jpa:parameter name="bankReferenceNumber" 	expression="payload['bankReferenceNumber']" />
 <int-jpa:parameter name="requestString"  		expression="payload['requestString']" />
 <int-jpa:parameter name="responseString" 		expression="payload['responseString']" />
 <int-jpa:parameter name="transactionStatus" 	expression="payload['transactionStatus']" />
 <int-jpa:parameter name="responseDate" 			expression="payload['responseDate']" />
</int-jpa:updating-outbound-gateway>
＆＃13; 
.blue{
    background-color: blue;
    width: 800px;
    height: 100px;
   border:1px solid #000;
  border-bottom:none;
  margin-top: -3px;
}
.yellow{
    background-color: yellow;
    width: 150px;
    height: 400px;
    display:inline-block;
   border:1px solid #000;
  border-bottom:none;
    border-top:none;
margin-top: -3px;

}

.red{
    background-color: red ;
    width: 500px;
    height: 400px;
    display: inline-block;
    padding: 0;
    border:1px solid #000;
  border-bottom:none;
    border-top:none;
  margin-top: -5px;
}
.green{
    background-color: green;
    width: 800px;
    height: 100px;
    border-bottom:2px solid black;
    margin-top: -3px;
    padding: 0;
     border:1px solid #000;
    border-top:none;
}
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

您可以使用＆＃34; <body> <div class="blue" ></div> <div style="padding-bottom: 0; margin-bottom: 0; display: inline-block" > <div class="yellow" style="border-right: none" ></div> <div class="red"></div> <div class="yellow" style="border-right: none"></div> </div> <div class="green"></div> </body＆＃34;防止这个问题。

<!-- -->

答案 5 :(得分：0)

我建议你像这样使用flexbox：

HTML：

<body>
<div class="blue" ></div>
<div class="flexbox" >
<div class="yellow"  style="border-right: none" ></div>
<div class="red"></div>
<div class="yellow"></div>
</div> 
<div class="green"></div>  
</body>

CSS：

.blue{
    background-color: blue;
    width: 800;
    height: 100
}
.yellow{
    background-color: yellow;
    width: 150;
    height: 400;
border-right: 0;
    border-bottom: none;
    display: inline-block;
    *display: inline;

}

.red{
    background-color: red ;
    width: 500;
    height: 400;
    padding: 0;
    margin: 0;
    border: none;
    display: inline-block;
    *display: inline;
}
.green{
    background-color: green;
    width: 800;
    height: 100;
border-bottom:2px solid black;
    margin-top: 0;
    padding: 0;
    border-top: none; 
}

.flexbox {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

答案 6 :(得分：0)

当您使用“inline-block”时，会有空格。这可以使用-ve margin来克服，或者在每个元素之间没有空格。 

  .blue {
  background-color: blue;
  width: 800;
  height: 100
}
.yellow {
  background-color: yellow;
  width: 150;
  height: 400;
  display: inline-block;
  border-right: 0;
  border-bottom: none;
}
.red {
  background-color: red;
  width: 500;
  height: 400;
  display: inline-block;
  padding: 0;
  border: none;
}
.green {
  background-color: green;
  width: 800;
  height: 100;
  border-bottom: 2px solid black;
  margin-top: 0;
  padding: 0;
  border-top: none;
}
<body>
  <div class="blue">Blue</div>
  <div style="padding-bottom: 0; margin-bottom: 0; display: inline-block">
    <div class="yellow" style="border-right: none">Yellow</div><div class="red">Red</div><div class="yellow">Yellow</div>
  </div>
  <div class="green">Green</div>
</body>

这是一个小提琴： https://jsfiddle.net/o26prsf9/

可在此处找到更多解释： https://css-tricks.com/fighting-the-space-between-inline-block-elements/

希望有所帮助..

答案 7 :(得分：0)

您可以按照以上建议使用＆＃34; display：flex＆＃34;或者您可以在CSS中进行一些更改，如下所述：

HTML更改：

<div class="blue" ></div>
<div style="padding-bottom: 0; margin-bottom: 0; **display:block;height:400px;**" >
<div class="yellow" ></div>
<div class="red"></div>
<div class="yellow"></div>
</div><div class="green"></div>

CSS更改：

.blue{
    background-color: blue;
    width: 800px;
    height: 100px;
}
.yellow{
    background-color: yellow;
    width: 150px;
    **height: 100%;**
    display:inline-block;
    border-right: 0px;
    border-bottom: none;
    **float:left;**
}

.red{
    background-color: red ;
    width: 500px;
    **height: 100%;**
    display: inline-block;
    padding: 0px;
    border: 0px;
    margin-left:0px;
    margin-right:0px;
    **float:left;**
}
.green{
    background-color: green;
    width: 800px;
    height: 100px;
border-bottom:2px solid black;
    margin-top: 0;
    padding: 0;
    border-top: none; 
}

小提琴：

https://jsfiddle.net/wuzjkb3h/

相关问题
最新问题