我想实现一个回答常见问题的博客。
我的问题是我不知道如何制作它,以便在扩展块时不会将其下方的块向下移动。我试图给类一个left-panel
属性position: relative;
,并给它的子类一个属性position: absolute;
。但他们在一次报复中被蒙蔽了双眼。而且我无法将它们分成一列。
.questions {
display: flex;
font-size: 12px;
line-height: 20px;
}
.left-panel {
max-width: 225px;
margin-right: 20px;
}
.question {
margin-bottom: 10px;
border: 2px solid #f8f4fa;
position: relative;
height: 60px;
}
.question:hover {
border: 2px solid #c42f33;
background-color: #ffffff;
height: 270px;
overflow-y: auto;
}
.question:hover .question-description {
display: block;
}
.question-title {
padding: 10px;
font-weight: 600;
color: #2f2f2f;
}
.question-description {
background-color: #ffffff;
padding: 10px;
display: none;
color: #4f4f4f;
}
<div class="questions">
<div class="left-panel">
<div class="question">
<div class="question-title">В чем преимущество покупки машины на аукционе?</div>
<div class="question-description">
Покупатель имеет возможность получить достоверную информацию об автомобиле: история, дефекты, ремонты. Машина получает точную оценку состояния кузова салона. Также в числе плюсов - огромный выбор.
</div>
</div>
<div class="question">
<div class="question-title">Как проходит оплата?</div>
<div class="question-description">
Оплата, проходит в три этапа.
<p>1. Аванс 30 тыс. руб. при заключении договора</p>
<p>2. Расходы (стоимость автомобиля на аукционе плюс все расходы связанные с учетом доставки)</p>
<p>3. Расходы по России (Таможенное оформление + доставка ТК по РФ)</p>
</div>
</div>
<div class="question">
<div class="question-title">Есть ли дополнительные платежи сверх договора?</div>
<div class="question-description">
Доставка автомобиля в Россию занимает от 30 дней с момента покупки выбранного авто.
</div>
</div>