我正在尝试通过将包装div questioncard
的高度设置为min-height
来适合div中的内容。我遇到的问题是,如果包装div中的元素不适合,则它不完全可见。这是HTML代码:
<div class="container question-wrapper">
<div class="col-lg-12 col-md-12 col-sm-12 question">
<div class="ratingnumber">1 av 6</div>
<div class="questioncard">
<div class="rating-question active" style="left:0;">
<p><?php echo $q12textA; ?></p>
<ul>
<li class="a_Btn singleNumberButton" data-answr="Del4_1" data-value="1">1</li>
<li class="a_Btn singleNumberButton" data-answr="Del4_1" data-value="2">2</li>
<li class="a_Btn singleNumberButton" data-answr="Del4_1" data-value="3">3</li>
<li class="a_Btn singleNumberButton" data-answr="Del4_1" data-value="4">4</li>
<li class="a_Btn singleNumberButton" data-answr="Del4_1" data-value="5">5</li>
<li class="a_Btn singleNumberButton" data-answr="Del4_1" data-value="6">6</li>
</ul>
</div>
<div class="rating-question">
<p><?php echo $q13textA; ?></p>
<ul>
<li class="a_Btn singleNumberButton" data-answr="Del4_2" data-value="1">1</li>
<li class="a_Btn singleNumberButton" data-answr="Del4_2" data-value="2">2</li>
<li class="a_Btn singleNumberButton" data-answr="Del4_2" data-value="3">3</li>
<li class="a_Btn singleNumberButton" data-answr="Del4_2" data-value="4">4</li>
<li class="a_Btn singleNumberButton" data-answr="Del4_2" data-value="5">5</li>
<li class="a_Btn singleNumberButton" data-answr="Del4_2" data-value="6">6</li>
</ul>
</div>
</div>
</div>
</div>
</div>
我将评分问题显示为幻灯片,因此一次只能看到一个。问题可以在下面的图片中看到,当我的数字不适合包裹元素时,我们看不到它们。
这是因为我为overflow:hidden
元素设置了question
。但是,如果我删除它,那么数字将从元素中删除,并且元素不会被消耗掉。这是css代码:
.question-wrapper {
position: relative;
max-width: 500px;
.question {
background-color: $theme-pink;
color: $white;
margin: 0 auto;
overflow: hidden;
padding: 0;
.ratingnumber {
background: #C06;
height: 45px;
line-height: 2.4em;
font-weight: 700;
text-align: center;
}
.questioncard {
position: relative;
padding: 20px 0;
height: 280px;
.rating-question {
position: absolute;
left: 100%;
width: 100%;
p {
font-size: 1.3em;
line-height: 1.2em;
padding: 0 25px;
min-height: 190px;
text-align: center;
}
ul {
list-style: none;
padding: 0;
margin: 0 20px;
text-align: center;
li {
display: inline-block;
background: #712584;
width: 40px;
height: 40px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-radius: 20px;
margin: 0 8px;
font-size: 1.6em;
line-height: 1.45em;
text-align: center;
position: relative;
box-shadow: 6px 3px 0px #B9005D;
cursor: pointer;
&.selected {
background-color: #cad101;
border: 3px solid #FFF;
color: #000;
line-height: 1.25em;
}
}
}
}
}
}
&:after {
content: '';
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 40px;
height: 40px;
position: relative;
bottom: 0px;
left: 0;
right: 0;
margin: 0 auto;
border-top: 20px solid #de0067;
border-right: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid transparent;
}
}
.next-button {
.nextratingbtn {
cursor: pointer;
font-size: 1.5em;
position: relative;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
max-width: 400px;
margin: 20px auto;
display: none;
&:hover {
color: #FFF;
}
&:before {
background-image: url(../images/icons/arrowright.png);
background-repeat: no-repeat;
content: "";
height: 40px;
left: calc(50% - 14px);
position: absolute;
top: -36px;
transform: rotate(90deg);
width: 30px;
}
}
}
}
@media screen and (max-width: 414px) {
.mainholder.part4 {
.question-wrapper {
.question {
ul li {
margin: 0 7.5px;
}
}
}
}
}
@media screen and (max-width: 398px) {
.mainholder.part4 {
.question-wrapper {
.question {
.questioncard {
.rating-question {
ul {
margin: 0 15px;
li {
margin: 0 8px;
}
}
}
}
}
}
}
}
@media screen and (max-width: 375px) {
.mainholder.part4 {
margin-top: 0;
padding-top: 0;
.question-wrapper {
ul {
li {
margin: 0 6px !important;
}
}
}
}
}
@media screen and (max-width: 320px) {
.mainholder.part4 {
margin-top: 0;
padding-top: 0;
.question-wrapper {
ul {
margin: 3px !important;
li {
margin: 0 4px !important;
}
}
}
}
}