且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

边界不会出现,尽管出现在检查元素

更新时间:2022-10-19 14:40:06

将其更改为 border-right:10px纯红色;



边框需要大小和边框类型;颜色是可选的。


I'm recreating a small widget from a psd and trying to put a thin border-right between the 3 container divs I'm using to separate the page into thirds. The divs have height, and I've tried adding in forced height to ensure that isn't the problem, but for some reason it just won't show up. The CSS has CSS Reset at the start, which you can grab from here.

Thanks for any help!

HTML

<div class="container">
  <div class="img"><img src="1.png" alt=""></div>
  <div class="txt">
    <div><p class="title taa">10</p><p class="title2 tab">,000 hrs</p></div>
    <div class="sub a"><p id="ac">Behavioural testing</p></div>
  </div>
</div>

<div class="container">
  <div class="img"><img src="2.png" alt=""></div>
  <div class="txt">
    <div><p class="title tba">8</p><p class="title2 tbb">years</p></div>
    <div class="sub b"><p id="bc">Creafting successful user <br> experience since 2005</p></div>
  </div>
</div>

<div class="container">
  <div class="txt">
    <div><p class="title tca">87</p><p class="title2 tcb">years</p></div>
    <div class="sub c"><p id="cc">Collective experience</p></div>
  </div>
  <div class="img"><img src="3.png" alt=""></div>
</div>

CSS

.container {
  display: inline-block;
  width: 600px;
  height: 300px;
  border-right: 10px red;
}

.img {
  display: inline-block;
}

.txt {
  display: inline-block;
}

.title {
  font-family: Helvetica;
  font-weight: bold;
  font-size: 91px;
  display: inline-block;
}

.title2 {
  font-family: Helvetica;
  font-weight: bold;
  font-size: 57px;
  display: inline-block;
}

.sub {
  font-family: Helvetica;
  font-size: 22px;
}

.a {
  position: relative;
  left: 8px;
}

Change it to border-right: 10px solid red;

Border requires size and type of border; color is optional.