不同div的div高度不一樣

我寫了一個響應網站，我有多個相同高度和寬度的divs。這裏是屏幕截圖：

有4個divs是相同的高度和寬度。然而第三格是不正確的。它的高度與其他3 divs不一樣。我如何能讓第三div的高度與其他div相同？
下面是代碼：不同div的div高度不一樣

CSS and HTML Code:

.category1{ 
 
    width: 100%; 
 
    height : 40%; 
 
    border-bottom: 1px solid #0067ac; \t 
 
} 
 
.category2{ 
 
    width: 100%; 
 
    height : 40%; 
 
    border-bottom: 1px solid grey; \t 
 
} 
 
/*#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; 
 
}

<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>

來源

2015-06-09 Ajay Kulkarni

爲了救自己從挫折中，使用自舉。你可以覆蓋引導樣式，如果你想，寫一次，到處運行 – Dummy

我應該使用'媒體查詢'，這就是問題所在。這是客戶的要求。 –

這是由於字體大小（18 vs 24）。您可以嘗試在文本之間添加一些填充以獲得相同的高度。我不認爲將高度設置爲40％在這種情況下是做任何事情。 – frosty

你試過line-height屬性？試試我的解決方案:)

.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>

來源

2015-06-09 07:12:23

非常好....謝謝:)線高度是否適用於「景觀」模式？ 'css'上面是'portrait'模式。 –

不客氣:) –

它也可以。此外，你可以設置垂直對齊，而不是填充頂部或填充底部屬性 –

-1

您是否嘗試過同樣的高度和寬度都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>

來源

2015-06-09 07:39:46 Suman

你試過你的代碼？它不會返回確切的結果。 –

它會變得相同高度所有div div div有內容與否。或線高度不會工作，如果你有更多的內容在一個div和更少的內容在其他股利。 http://stackoverflow.com/questions/30725035/div-height-not-same-for-different-divs/30725817?noredirect=1#comment49508908_30725817 – Suman

不同div的div高度不一樣

回答

相關問題