Używam układu flex i po prostu kocham jak to działa, ale mam problem z właściwością layoutu.flex mesy nieruchomości przycisk wysokość przycisku?
Używam bootstrap i układam z flexem.
Obecnie przycisk przyjmuje wysokość pojemnika. Pod tekstem jest bardzo dużo miejsca i chcę go usunąć, a kiedy dodaję dopełnienie do przycisku, jego rozmiar staje się nierówny. Próbowałem dostosować rozmiar po linii, ale starałem się znaleźć rzeczywiste rozwiązanie i powód, dla którego mam ten problem.
Coś, czego tu brakuje z flexem czy jest to coś innego? Każda pomoc będzie bardzo ceniona. Dzięki.
.vessel-card {
display: flex;
flex-direction: column;
}
.vessel-card h3 {
margin: 0;
padding: 20px 0;
}
.departure-card {
display: flex;
padding: 20px 0;
border-top: 2px solid #888;
}
.departure-card p {
margin-right: 10px;
}
.departure-card:last-child {
border-bottom: 2px solid #888;
}
.departure-card .btn-explore {
border: 1px solid #000;
display: inline-block;
text-transform: uppercase;
color: #000;
border-radius: 0;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4 vessel-card">
<a href="cienfuegos-from-havana.html" class="special-departure">
<img src="http://placehold.it/350x150">
</a>
<h3>Vessel: Panorama</h3>
<div class="departure-card">
<p>Havana to Cienfuegos starting at $5,999</p>
<a href="#" class="btn btn-explore">Explore</a>
</div>
<div class="departure-card">
<p>Havana to Cienfuegos starting at $5,999</p>
<a href="cienfuegos-from-havana.html" class="btn btn-explore">Explore</a>
</div>
</div>
</div>
</div>
Dzięki @Nenad Bardzo mi się podobał. – vikrantnegi007
Nie ma za co. Aby dodać, masz domyślny 'margin' na tagu' p', a także możesz użyć innych opcji 'align-items', takich jak' flex-start' https://jsfiddle.net/6qym530t/2/ –
zaczyna się? – vikrantnegi007