我有兩個 div，想在同一位置顯示兩個 div 的內容。由于第一個 div 中的文本較長并且會影響正文內容的位置，因此這兩個 div 看起來不一樣。我希望第二個 div 正文內容的位置與第一個 div 正文內容一樣。請查看我附上的 SS。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
crossorigin="anonymous"
/>
</head>
<body style="padding: 40px">
<div class="d-flex flex-column border border-primary " style="max-width: 400px ; height: 130px ">
<div class="w-100 bg-warning text-center p-2">
<a href="">Somecontent from a map function here dsdsadsadsffffffff</a>
</div>
<div class="h-100">
<div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2" onclick="alert('hey')" >
<text class="bg-warning"> discussed </text>
<div onclick="alert('hey click me')">icons here</div>
</div>
</div>
</div>
<div class="d-flex flex-column border border-primary mt-2 " style="max-width: 400px ; height: 130px;">
<div class="w-100 bg-warning text-center p-2">
<a href="">Somecontent from a map</a>
</div>
<div class="h-100" onclick="alert('hey')">
<div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2" >
<text class="bg-warning"> discussed </text>
<div onclick="alert('hey click me')">icons here</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA /3y gxIOqMEjwtxJY7qPCqsdltbNJuaOe923 mo//f6V8Qbsw3"
crossorigin="anonymous"
></script>
</body>
</html>uj5u.com熱心網友回復：
洗掉你的 staticheight然后在你的div上使用vertical.py-3類。1rempadding.h-100
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous" />
</head>
<body style="padding: 40px">
<div class="d-flex flex-column border border-primary " style="max-width: 400px; height: 140px;">
<div class="w-100 bg-warning text-center p-2">
<a href="">Somecontent from a map function here dsdsadsadsffffffff</a>
</div>
<div class="h-100 d-flex justify-content-between align-items-center">
<div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2 w-100" onclick="alert('hey')">
<text class="bg-warning"> discussed </text>
<div onclick="alert('hey click me')">icons here</div>
</div>
</div>
</div>
<div class="d-flex flex-column border border-primary mt-2 " style="max-width: 400px; height: 140px;">
<div class="w-100 bg-warning text-center py-3">
<a href="">Somecontent from a map</a>
</div>
<div class="h-100 d-flex justify-content-between align-items-center" onclick="alert('hey')">
<div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2 w-100">
<text class="bg-warning"> discussed </text>
<div onclick="alert('hey click me')">icons here</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA /3y gxIOqMEjwtxJY7qPCqsdltbNJuaOe923 mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>uj5u.com熱心網友回復：
如果你不想改變高度，我唯一能看到的就是剪切文本或增加寬度或你的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
crossorigin="anonymous"
/>
<style>
span {
width : 100%;
word-break: break-all;
overflow: hidden;
position: relative;
display: block;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body style="padding: 40px">
<div class="d-flex flex-column border border-primary " style="max-width: 400px ; height: 130px ">
<div class="w-100 bg-warning text-center p-2">
<a href=""><span>Somecontent from a map function here dsdsadsadsffffffff<span></a>
</div>
<div class="h-100">
<div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2" onclick="alert('hey')" >
<text class="bg-warning"> discussed </text>
<div onclick="alert('hey click me')">icons here</div>
</div>
</div>
</div>
<div class="d-flex flex-column border border-primary mt-2 " style="max-width: 400px ; height: 130px;">
<div class="w-100 bg-warning text-center p-2">
<a href="">Somecontent from a map</a>
</div>
<div class="h-100" onclick="alert('hey')">
<div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2" >
<text class="bg-warning"> discussed </text>
<div onclick="alert('hey click me')">icons here</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA /3y gxIOqMEjwtxJY7qPCqsdltbNJuaOe923 mo//f6V8Qbsw3"
crossorigin="anonymous"
></script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/534536.html