如何在没有滚动条的情况下制作带有首字下沉响应式的两列布局？
How can I make a two-column layout with drop-caps responsive without scrollbars?
我正在学习 html 和 css 的基础知识，并尝试从头开始构建我自己的博客，从头开始编写代码，因为这是我唯一的方法真正学习。我希望它能够响应不同的屏幕宽度，所以我使用 bootstrap 网格，但构建了我自己的自定义组件，因为 bootstrap 看起来有点太千篇一律了。具体来说，我遇到困难的是页面顶部的单个 DIV 元素，我想在其中包含我最近的博客 post。它包含一个浮动图像和两列文本。我已将所有内容放在网格的行中，我期望的是：当有人开始最小化屏幕时，或者当使用较小的设备查看网站时，我希望这些文字能够重新对齐到他们拥有的任何屏幕尺寸，我不希望出现滚动条。有没有办法做到这一点。我已经包含了下面的代码（全部），但是相关的 DIV 首先在顶部 posted，还有一张全屏尺寸的图片，还有一个其中 window 的大小变小了。
全尺寸：
调整后的屏幕：
这里是DIV，还有相关的CSS。以防万一我不明白什么可能是相关的，整个代码都在最底部。感谢您花时间帮助我。顶部的定位也有问题，但我想我可以解决这个问题，否则我将不得不提出另一个问题。再次感谢。
DIV 元素 HTML:
<!--First Blog Post-->
<div class="row" id="row1">
<div class="col" id="row1_col1">
<!--Let's make our own version of card-->
<div class="ourCard" id="fbPost">
<div id="holdHeader"><span id="badgePin" class="badge badge-primary">Featured</span><h3 id="titleTop">Historical Oncology</h3></div>
<span id="postDate"><b>Posted On:</b> <em>June 23, 2021</em></span>
<hr id="blogOne_hr">
<div id="holder">
<img src="Images/473a9b83088edfa35bdba1b7691056ad.jpg" alt="..." class="cornImg" id="cornImg1">
<div id="txtCol1" class="txtCol"><span id="dCap">T</span><p class="pInd">hThis is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholder </p>
<p class="pInd">This is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholder </p>
<p class="pInd">This is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy </p></div>
</div>
<p id="txtCol2" class="txtCol">Second column is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholder text stupid stupid sThis is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholder text stupid stupid std copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl placeholder text stupid stupid std copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl </p>
</div>
<a href="#" class="blogButton" id="fBlgBtn">Read More</a>
</div>
</div>
CSS :
@charset "utf-8";
/* CSS Document */
/*IDs*/
#cornImg1 {
width:120px;
height:132px;
float:left;
margin-right:10px;
margin-left:20px;
margin-bottom:5px;
shape-outside:circle();
margin-top:24px;
border: 2px solid blue;
border-radius:75%;
}
#txtCol1 {
}
#postDate {
position:absolute;
top:53px;
right:125px;
font-size:12px;
}
#txtCol2 {
float:right;
margin-left:15px;
text-indent:3em;
margin-bottom:5px;
}
#holdHeader {
width:100%;
height:40px;
text-align:center;
background-color:Lavender;
display:flex;
flex-direction:row;
flex-wrap:no-wrap;
}
#badgePin {
height:60%;
width:65px;
margin-left:60px;
margin-top:10px;
}
#titleTop {
position:absolute;
left:41%;
margin-bottom:3px;
text-align:center;
font-family:'Lobster', cursive;
font-size:30px;
}
#dCap {
float: left;
line-height: 85%;
width: .7em;
font-size: 400%;
font-family: georgia;
}
#fBlgBtn {
position:relative;
left:1026px;
bottom:40px;
color:red;
}
#topBanner {
width:100% !important;
height:123px;
background:black;
}
#fbPost {
border: 2px solid blue;
width:90%;
height:355px;
margin-top:10px;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
overflow:auto;
display:flex;
flex-direction:row;
flex-wrap:wrap;
}
#blogOne_hr {
position:absolute;
top:58px;
color:Lavender;
width:1110px;
height:3px;
display:inline;
}
#secHolder {
display:inline;
}
#holder {
margin-right:15px;
margin-left:15px;
display:inline;
}
/*CLASSES*/
.techImg {
width:75px !important;
height:100px !important;
border: 1px blue;
}
.txtCol {
width:500px;
font-family: 'Roboto', sans-serif;
font-size:12px;
line-height:1.3em;
letter-spacing:.13em;
text-align:justify;
margin-bottom:3px;
margin-left:15px;
margin-top:24px;
}
/*
font-family: 'Cabin', sans-serif;
font-family: 'Lato', sans-serif;
font-family: 'Lobster', cursive;
font-family: 'Montserrat', sans-serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Playfair Display', serif;
font-family: 'Roboto', sans-serif;
font-family: 'Viaoda Libre', cursive; */
.pInd {
display:inline;
text-indent:3em;
}
.blogButton {
background-color:Thistle;
color:black;
padding-top:1px;
padding-left:10px;
padding-right:10px;
padding-bottom:1px;
border-radius:25px;
text-decoration:none;
font-weight:500;
}
这是整个 HTML 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Practicing with Div</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="CSS/endling_index.css">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Include google fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cabin&family=Lato&family=Lobster&family=Montserrat&family=Open+Sans&family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=Roboto&family=Viaoda+Libre&display=swap" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="javascript/divPlay.js" type="text/javascript"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">About</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Philosphy <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Spiritualism</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Social Change</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Technology</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container-fluid">
<!--Zeroth Row Banner Image-->
<div class="row" id="row0">
<div class="col" id="row0_col1">
<img class="banPics" id="topBanner" alt="There will always be something to read here..." src="Images/bannerPlaceholder.jpg">
</div>
</div>
<!--First Blog Post-->
<div class="row" id="row1">
<div class="col" id="row1_col1">
<!--Let's make our own version of card-->
<div class="ourCard" id="fbPost">
<div id="holdHeader"><span id="badgePin" class="badge badge-primary">Featured</span><h3 id="titleTop">Historical Oncology</h3></div>
<span id="postDate"><b>Posted On:</b> <em>June 23, 2021</em></span>
<hr id="blogOne_hr">
<div id="holder">
<img src="Images/473a9b83088edfa35bdba1b7691056ad.jpg" alt="..." class="cornImg" id="cornImg1">
<div id="txtCol1" class="txtCol"><span id="dCap">T</span><p class="pInd">hThis is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholder </p>
<p class="pInd">This is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholder </p>
<p class="pInd">This is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy </p></div>
</div>
<p id="txtCol2" class="txtCol">Second column is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholder text stupid stupid sThis is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholder text stupid stupid std copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl placeholder text stupid stupid std copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl </p>
</div>
<a href="#" class="blogButton" id="fBlgBtn">Read More</a>
</div>
</div>
<!--Most recent blogpost-->
<div class="row" id="row2">
<div class="col" id="row2_col1">
<!--Custom div?-->
<!--Let's make our own version of card-->
<div class="ourCard" id="fbPost">
<div id="holdHeader"><h3 id="titleTop">The Holy Saucer</h3></div>
<span id="postDate"><b>Posted On:</b> <em>June 23, 2021</em></span>
<hr id="blogOne_hr">
<div id="holder">
<img src="Images/473a9b83088edfa35bdba1b7691056ad.jpg" alt="..." class="cornImg" id="cornImg1">
<div id="txtCol1" class="txtCol"><span id="dCap">T</span><p class="pInd">This is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholder </p>
<p class="pInd"> This is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholder </p>
<p class="pInd">This is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholder</p></div>
</div>
<p id="txtCol2" class="txtCol">This is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholder text stupid stupid sThis is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholder text stupid stupid std copy and make sure it has no obsenities frls al this is dumb why cant there be an option to throw placeholder text stupid stupid std copy and make sure it has no obsenitiesfrls al this is dumb why cant there be an option to throw placeholder text stupid stupid std copy and make sure it has no obsenities </p>
</div>
<a href="#" class="blogButton" id="fBlgBtn">Read More</a>
</div>
</div>
<!--Second most recent blogpost-->
<div class="row" id="row3">
<div class="col" id="row3_col1">
<!--Let's make our own version of card-->
<div class="ourCard" id="fbPost">
<div id="holdHeader"><h3 id="titleTop">Transcendant Troubles</h3></div>
<span id="postDate"><b>Posted On:</b> <em>June 23, 2021</em></span>
<hr id="blogOne_hr">
<div id="holder">
<img src="Images/473a9b83088edfa35bdba1b7691056ad.jpg" alt="..." class="cornImg" id="cornImg1">
<div id="txtCol1" class="txtCol"><span id="dCap">T</span><p class="pInd">This is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholder </p>
<p class="pInd"> This is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholder </p>
<p class="pInd">This is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl </p></div>
</div>
<p id="txtCol2" class="txtCol">This is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholderThis is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholderThis is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholde of tex</p>
</div>
<a href="#" class="blogButton" id="fBlgBtn">Read More</a>
</div>
</div>
<!--Third most recent blogpost-->
<div class="row" id="row4">
<div class="col" id="row4_col1">
</div>
</div>
<!--Horizontal Rule-->
<div class="row" id="row5">
</div>
<!--Technological projects-->
<div class="row" id="row6">
<div class="col" id="row5_col1">
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="Images/473a9b83088edfa35bdba1b7691056ad.jpg" style="width:25%;height:25%;" alt="Card image cap">
<div class="card-header">Take Your Chains Back</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="Images/473a9b83088edfa35bdba1b7691056ad.jpg" style="width:25%;height:25%;" alt="Card image cap">
<div class="card-header">Project One</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="Images/473a9b83088edfa35bdba1b7691056ad.jpg" style="width:25%;height:25%;" alt="Card image cap">
<div class="card-header">Just A Chip off the Block</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Is there even any point to this? Why don't I just make my own stuff. All the bootstrap stuff looks the same, boring boring boring borin gobring obierteriterotje</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="row7">
<br>
<hr>
<br>
</div>
</div>
</body>
</html>
尝试从头开始为这样的项目编写代码，对您来说真是太好了！我也是这样学得最好的。
你得到滚动条是因为你在 #fbPost 中设置了 div 的高度，而不是让它由内容决定，然后你还设置了 overflow: auto，它告诉浏览器在容器内容溢出容器时显示滚动条，否则隐藏滚动条。您可以阅读更多相关信息 here
此外，作为最佳实践，id 应该是唯一的。因此，您的 html 和 id="fbPost" 中应该只有一件事，您不应该将它放在每个部分中。最好使用像 ourCard class 这样的 classes 来设置多个元素的样式。
关于如何让内容分两栏，直接用column-count css property即可。
我还建议研究和学习 CSS Grid 布局而不是使用浮动（除非您正确地为图像使用浮动 - 这正是设计浮动的用例。您只是不想将其用于列和总体布局）。
这是一个非常基本的 JSFiddle，展示了我在说什么：https://jsfiddle.net/karlynelson/vd7zq8h4/29/
您可以使用媒体查询使其在特定点下降到一列文本，或者 use fancy css grid min-max and auto-fill to do it automatically。
我正在学习 html 和 css 的基础知识，并尝试从头开始构建我自己的博客，从头开始编写代码，因为这是我唯一的方法真正学习。我希望它能够响应不同的屏幕宽度，所以我使用 bootstrap 网格，但构建了我自己的自定义组件，因为 bootstrap 看起来有点太千篇一律了。具体来说，我遇到困难的是页面顶部的单个 DIV 元素，我想在其中包含我最近的博客 post。它包含一个浮动图像和两列文本。我已将所有内容放在网格的行中，我期望的是：当有人开始最小化屏幕时，或者当使用较小的设备查看网站时，我希望这些文字能够重新对齐到他们拥有的任何屏幕尺寸，我不希望出现滚动条。有没有办法做到这一点。我已经包含了下面的代码（全部），但是相关的 DIV 首先在顶部 posted，还有一张全屏尺寸的图片，还有一个其中 window 的大小变小了。
全尺寸：
调整后的屏幕：
这里是DIV，还有相关的CSS。以防万一我不明白什么可能是相关的，整个代码都在最底部。感谢您花时间帮助我。顶部的定位也有问题，但我想我可以解决这个问题，否则我将不得不提出另一个问题。再次感谢。
DIV 元素 HTML:
<!--First Blog Post-->
<div class="row" id="row1">
<div class="col" id="row1_col1">
<!--Let's make our own version of card-->
<div class="ourCard" id="fbPost">
<div id="holdHeader"><span id="badgePin" class="badge badge-primary">Featured</span><h3 id="titleTop">Historical Oncology</h3></div>
<span id="postDate"><b>Posted On:</b> <em>June 23, 2021</em></span>
<hr id="blogOne_hr">
<div id="holder">
<img src="Images/473a9b83088edfa35bdba1b7691056ad.jpg" alt="..." class="cornImg" id="cornImg1">
<div id="txtCol1" class="txtCol"><span id="dCap">T</span><p class="pInd">hThis is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholder </p>
<p class="pInd">This is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholder </p>
<p class="pInd">This is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy </p></div>
</div>
<p id="txtCol2" class="txtCol">Second column is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholder text stupid stupid sThis is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholder text stupid stupid std copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl placeholder text stupid stupid std copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl </p>
</div>
<a href="#" class="blogButton" id="fBlgBtn">Read More</a>
</div>
</div>
CSS :
@charset "utf-8";
/* CSS Document */
/*IDs*/
#cornImg1 {
width:120px;
height:132px;
float:left;
margin-right:10px;
margin-left:20px;
margin-bottom:5px;
shape-outside:circle();
margin-top:24px;
border: 2px solid blue;
border-radius:75%;
}
#txtCol1 {
}
#postDate {
position:absolute;
top:53px;
right:125px;
font-size:12px;
}
#txtCol2 {
float:right;
margin-left:15px;
text-indent:3em;
margin-bottom:5px;
}
#holdHeader {
width:100%;
height:40px;
text-align:center;
background-color:Lavender;
display:flex;
flex-direction:row;
flex-wrap:no-wrap;
}
#badgePin {
height:60%;
width:65px;
margin-left:60px;
margin-top:10px;
}
#titleTop {
position:absolute;
left:41%;
margin-bottom:3px;
text-align:center;
font-family:'Lobster', cursive;
font-size:30px;
}
#dCap {
float: left;
line-height: 85%;
width: .7em;
font-size: 400%;
font-family: georgia;
}
#fBlgBtn {
position:relative;
left:1026px;
bottom:40px;
color:red;
}
#topBanner {
width:100% !important;
height:123px;
background:black;
}
#fbPost {
border: 2px solid blue;
width:90%;
height:355px;
margin-top:10px;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
overflow:auto;
display:flex;
flex-direction:row;
flex-wrap:wrap;
}
#blogOne_hr {
position:absolute;
top:58px;
color:Lavender;
width:1110px;
height:3px;
display:inline;
}
#secHolder {
display:inline;
}
#holder {
margin-right:15px;
margin-left:15px;
display:inline;
}
/*CLASSES*/
.techImg {
width:75px !important;
height:100px !important;
border: 1px blue;
}
.txtCol {
width:500px;
font-family: 'Roboto', sans-serif;
font-size:12px;
line-height:1.3em;
letter-spacing:.13em;
text-align:justify;
margin-bottom:3px;
margin-left:15px;
margin-top:24px;
}
/*
font-family: 'Cabin', sans-serif;
font-family: 'Lato', sans-serif;
font-family: 'Lobster', cursive;
font-family: 'Montserrat', sans-serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Playfair Display', serif;
font-family: 'Roboto', sans-serif;
font-family: 'Viaoda Libre', cursive; */
.pInd {
display:inline;
text-indent:3em;
}
.blogButton {
background-color:Thistle;
color:black;
padding-top:1px;
padding-left:10px;
padding-right:10px;
padding-bottom:1px;
border-radius:25px;
text-decoration:none;
font-weight:500;
}
这是整个 HTML 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Practicing with Div</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="CSS/endling_index.css">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Include google fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cabin&family=Lato&family=Lobster&family=Montserrat&family=Open+Sans&family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=Roboto&family=Viaoda+Libre&display=swap" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="javascript/divPlay.js" type="text/javascript"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">About</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Philosphy <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Spiritualism</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Social Change</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Technology</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container-fluid">
<!--Zeroth Row Banner Image-->
<div class="row" id="row0">
<div class="col" id="row0_col1">
<img class="banPics" id="topBanner" alt="There will always be something to read here..." src="Images/bannerPlaceholder.jpg">
</div>
</div>
<!--First Blog Post-->
<div class="row" id="row1">
<div class="col" id="row1_col1">
<!--Let's make our own version of card-->
<div class="ourCard" id="fbPost">
<div id="holdHeader"><span id="badgePin" class="badge badge-primary">Featured</span><h3 id="titleTop">Historical Oncology</h3></div>
<span id="postDate"><b>Posted On:</b> <em>June 23, 2021</em></span>
<hr id="blogOne_hr">
<div id="holder">
<img src="Images/473a9b83088edfa35bdba1b7691056ad.jpg" alt="..." class="cornImg" id="cornImg1">
<div id="txtCol1" class="txtCol"><span id="dCap">T</span><p class="pInd">hThis is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholder </p>
<p class="pInd">This is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholder </p>
<p class="pInd">This is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy </p></div>
</div>
<p id="txtCol2" class="txtCol">Second column is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholder text stupid stupid sThis is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholder text stupid stupid std copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl placeholder text stupid stupid std copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl </p>
</div>
<a href="#" class="blogButton" id="fBlgBtn">Read More</a>
</div>
</div>
<!--Most recent blogpost-->
<div class="row" id="row2">
<div class="col" id="row2_col1">
<!--Custom div?-->
<!--Let's make our own version of card-->
<div class="ourCard" id="fbPost">
<div id="holdHeader"><h3 id="titleTop">The Holy Saucer</h3></div>
<span id="postDate"><b>Posted On:</b> <em>June 23, 2021</em></span>
<hr id="blogOne_hr">
<div id="holder">
<img src="Images/473a9b83088edfa35bdba1b7691056ad.jpg" alt="..." class="cornImg" id="cornImg1">
<div id="txtCol1" class="txtCol"><span id="dCap">T</span><p class="pInd">This is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholder </p>
<p class="pInd"> This is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholder </p>
<p class="pInd">This is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholder</p></div>
</div>
<p id="txtCol2" class="txtCol">This is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholder text stupid stupid sThis is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholder text stupid stupid std copy and make sure it has no obsenities frls al this is dumb why cant there be an option to throw placeholder text stupid stupid std copy and make sure it has no obsenitiesfrls al this is dumb why cant there be an option to throw placeholder text stupid stupid std copy and make sure it has no obsenities </p>
</div>
<a href="#" class="blogButton" id="fBlgBtn">Read More</a>
</div>
</div>
<!--Second most recent blogpost-->
<div class="row" id="row3">
<div class="col" id="row3_col1">
<!--Let's make our own version of card-->
<div class="ourCard" id="fbPost">
<div id="holdHeader"><h3 id="titleTop">Transcendant Troubles</h3></div>
<span id="postDate"><b>Posted On:</b> <em>June 23, 2021</em></span>
<hr id="blogOne_hr">
<div id="holder">
<img src="Images/473a9b83088edfa35bdba1b7691056ad.jpg" alt="..." class="cornImg" id="cornImg1">
<div id="txtCol1" class="txtCol"><span id="dCap">T</span><p class="pInd">This is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholder </p>
<p class="pInd"> This is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholder </p>
<p class="pInd">This is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl </p></div>
</div>
<p id="txtCol2" class="txtCol">This is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholderThis is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholderThis is just a bunch of really stupid placeholder text that I have written out because there is no lorem ipsum anywhere to be found. Anywys, I just need a bunch of text that I can copy and copy and copy and make sure it has no obsenities or anything stupid, so that blah blah blah blag andl asd frls al this is dumb why cant there be an option to throw placeholde of tex</p>
</div>
<a href="#" class="blogButton" id="fBlgBtn">Read More</a>
</div>
</div>
<!--Third most recent blogpost-->
<div class="row" id="row4">
<div class="col" id="row4_col1">
</div>
</div>
<!--Horizontal Rule-->
<div class="row" id="row5">
</div>
<!--Technological projects-->
<div class="row" id="row6">
<div class="col" id="row5_col1">
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="Images/473a9b83088edfa35bdba1b7691056ad.jpg" style="width:25%;height:25%;" alt="Card image cap">
<div class="card-header">Take Your Chains Back</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="Images/473a9b83088edfa35bdba1b7691056ad.jpg" style="width:25%;height:25%;" alt="Card image cap">
<div class="card-header">Project One</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="Images/473a9b83088edfa35bdba1b7691056ad.jpg" style="width:25%;height:25%;" alt="Card image cap">
<div class="card-header">Just A Chip off the Block</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Is there even any point to this? Why don't I just make my own stuff. All the bootstrap stuff looks the same, boring boring boring borin gobring obierteriterotje</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="row7">
<br>
<hr>
<br>
</div>
</div>
</body>
</html>
尝试从头开始为这样的项目编写代码，对您来说真是太好了！我也是这样学得最好的。
你得到滚动条是因为你在 #fbPost 中设置了 div 的高度，而不是让它由内容决定，然后你还设置了 overflow: auto，它告诉浏览器在容器内容溢出容器时显示滚动条，否则隐藏滚动条。您可以阅读更多相关信息 here
此外，作为最佳实践，id 应该是唯一的。因此，您的 html 和 id="fbPost" 中应该只有一件事，您不应该将它放在每个部分中。最好使用像 ourCard class 这样的 classes 来设置多个元素的样式。
关于如何让内容分两栏，直接用column-count css property即可。
我还建议研究和学习 CSS Grid 布局而不是使用浮动（除非您正确地为图像使用浮动 - 这正是设计浮动的用例。您只是不想将其用于列和总体布局）。
这是一个非常基本的 JSFiddle，展示了我在说什么：https://jsfiddle.net/karlynelson/vd7zq8h4/29/
您可以使用媒体查询使其在特定点下降到一列文本，或者 use fancy css grid min-max and auto-fill to do it automatically。