在響應問題中的困難

我想用css製作一個字段集，其中的圖例居中！我有兩個問題第一個是根據其內容的框大小更改，但是我希望所有字段集都保持相同的大小內容是否大於其他人。如何實現這一目標？在響應問題中的困難

第二個問題是：我想添加一個句柄到圖例的上半部分，以便它看起來像一個公文包。這對於正常的皮膚很好，但是在較小的皮膚中，這個手柄從原點移開。如何解決這個問題，以便手柄響應並且不會在較小的皮膚中移位？
這裏是DEMO的問題。

手柄：

.handle { 
    position: absolute; 
    top: -28px; 
    left: 50%; 
    border: 12px solid rgba(77, 53, 33, 1); 
    border-bottom: 0 none; 
    width: 48px; 
    height: 28px; 
    margin-left: -30px; 
    -webkit-border-radius: 10px 10px 0 0; 
    -moz-border-radius: 10px 10px 0 0; 
    border-radius: 10px 10px 0 0; 
}

來源

2015-12-04 query

這將解決您的手柄的問題。

.handle { 
    top: -45px; 
} 

@media screen and (min-width: 768px) { 
    .handle { 
    top: -28px; 
    } 
}

這將解決您的身高問題。

@media screen and (min-width: 768px) { 
    .inner-child { 
    min-height: 300px; 
    } 
}

來源

2015-12-04 21:58:01

第二個問題是可以解決的設置「頂：汽車」，並以「邊距：-46px」走高手柄

.handle { 
position: absolute; 
top: auto; 
margin-top:-46px; 
left: 50%; 
border: 12px solid rgba(77, 53, 33, 1); 
border-bottom: 0 none; 
width: 48px; 
height: 28px; 
margin-left: -30px; 
-webkit-border-radius: 10px 10px 0 0; 
-moz-border-radius: 10px 10px 0 0; 
border-radius: 10px 10px 0 0; 
}

對於增加盒，你可以增加之間的垂直間距到70px，或更多，從底部的邊緣。

.feature .inner-child{ 
    ... 
    margin: 15px 0 70px 0; 
}

第一個問題可以通過jquery計算更高的塊並將相同的高度設置到所有其他框來解決。您可以創建一個迭代，查找「.inner-child」元素的最大高度，並將此高度設置爲all。

jQuery(document).ready(function(){   
    var maxHeight = 0; 

    $(".inner-child").each(function(key, value){ //Create a iteration of all .inner-child elements 
     maxHeight = Math.max($(value).height(), maxHeight); //find the height of higher box 
    }); 

    $(".inner-child").css("height", maxHeight); //Set height 

    });

我創建這個解決方案的DEMO。

來源

2015-12-04 22:04:50 cesare

我正在尋找其他解決方案，而不是滾動在CSS中，現在出現了一個新問題，當我最小化屏幕時，兩個框架集之間沒有空隙，我的意思是一個框架集的底部仍然附着在手柄的頂部下一個！我更新了[demo]（http://mydemo.byethost33.com） – query

您可以增加.inner-child底部的邊距。我更新了答案。 – cesare

在響應問題中的困難

回答

相關問題