Question

我写了一个响应式网站，其中我有多个divs具有相同的高度和宽度。这是截图：

有4个高度和宽度相同的div。但是第3个div并不合适。它的高度与其他3 divs的高度不同。如何使第3 div的高度与其他div相同？
这是代码：

CSS and HTML Code:

＆＃13;

.category1{
  width: 100%;
  height : 40%;
  border-bottom: 1px solid #0067ac;	
}
.category2{
  width: 100%;
  height : 40%;
  border-bottom: 1px solid grey;	
}
/*#category1{
font-size: 14px;
}*/
.ctgryName1{
  color: #0067ac;
  font-size: 24px;
  font-weight: 500;
  font-family: "robotRegular";
}
.ctgryName2{
  color: grey;
  font-size: 18px;
  font-weight: 500;
  font-family: "robotRegular";
}
.ctgryIcon1{
  background-image: url("../JunosImages/mob/timed-active_icon.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: block;           
  height: 18px;
  margin-top: 0.7%;
  width: 12px;
}

＆＃13;

<div class = "category1">
  <span class = "ctgryName1">JNCIA - Junos</span>
</div>
<div class = "category1" id="catergory1">
  <span class = "ctgryName1">Timed Test</span>
</div>
<div class = "category2">
  <span class = "ctgryName2">Timed Tests with items from all topics</span>
  <span class = "ctgryIcon1 pull-right"></span>
</div>
<div class = "category1">
  <span class = "ctgryName1">Practice Test Topics</span>
</div>

＆＃13;

Answer 1

您是否尝试过行高属性？试试我的解决方案：）

.category1{
        width: 100%;
        line-height : 40px;
        border-bottom: 1px solid #0067ac;   
    }
    .category2{
        width: 100%;
        line-height : 40px;
        border-bottom: 1px solid grey;  
    }
    #category1{
        font-size: 14px;
    }
    .ctgryName1{
        color: #0067ac;
        font-size: 24px;
        font-weight: 500;
        font-family: "robotRegular";
    }
    .ctgryName2{
        color: grey;
        font-size: 18px;
        font-weight: 500;
        font-family: "robotRegular";
    }
    .ctgryIcon1{
        background-image: url("../JunosImages/mob/timed-active_icon.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: block;
        width: 12px;
    }

<div class = "category1">
                        <span class = "ctgryName1">JNCIA - Junos</span>
                    </div>
                    <div class = "category1" id="catergory1">
                        <span class = "ctgryName1">Timed Test</span>
                    </div>
                    <div class = "category2">
                        <span class = "ctgryName2">Timed Tests with items from all topics</span>
                        <span class = "ctgryIcon1 pull-right"></span>
                    </div>
                    <div class = "category1">
                        <span class = "ctgryName1">Practice Test Topics</span>
                    </div>

Answer 2

您是否尝试过所有div的相同高度和宽度请尝试我的解决方案，如下所示。

$( document ).ready(function() {   
    var maxHeight = Math.max.apply(null, $(".cat1").map(function () {
        return $(this).height();
    }).get());
            
    $(".cat1").css("height",maxHeight);
});

.category1{
    width: 100%;
    line-height : 40px;
    border-bottom: 1px solid #0067ac;   
}
.cat1 { min-height:50px;}
.category2{
    width: 100%;
    line-height : 40px;
    border-bottom: 1px solid grey;  
}
#category1{
    font-size: 14px;
}
.ctgryName1{
    color: #0067ac;
    font-size: 24px;
    font-weight: 500;
    font-family: "robotRegular";
}
.ctgryName2{
    color: grey;
    font-size: 18px;
    font-weight: 500;
    font-family: "robotRegular";
}
.ctgryIcon1{
    background-image: url("../JunosImages/mob/timed-active_icon.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: block;
    width: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "category1 cat1">
    <span class = "ctgryName1">JNCIA - Junos</span>
</div>
<div class = "category1 cat1" id="catergory1">
    <span class = "ctgryName1">Timed Test</span>
</div>
<div class = "category2 cat1">
    <span class = "ctgryName2"> Timed Tests with items from all topicsTimed Tests with items from all topicsTimed Tests with items from all topics Timed Tests with items from all topics Timed Tests with items from all topicsTimed Tests with items from all topicsTimed Tests with items from all topics Timed Tests with items from all topics</span>
    <span class = "ctgryIcon1 pull-right"></span>
</div>
<div class = "category1 cat1">
    <span class = "ctgryName1">Practice Test Topics</span>
</div>

不同div的Div高度不相同

2 个答案: