如何将div与包括h1、p和pictrue在内的4个文本框对齐
如何将div与包括h1、p和pictrue在内的4个文本框对齐
提问于 2018-06-04 03:37:25
我对HTML和CSS都是新手。目前，我正在尝试如何安排一个带有四个文本框的div，其中包括一个标题、段落和一个位于左侧的img。整个过程应该是这样的：
首先选择一个div的底部窗格，因为它位于页面的底部。给它一个宽度和高度，它将继承到下面的div。
正如您所看到的，这看起来与它的预期相去甚远。现在，我不知道如何从这一步走得更远。我正在努力学习CSS的语法和知识。
有人能帮我做这个吗？代码编写如下：
.bottompane {
width: 100%; /* defines overall width of bottompane */
height: 300px; /* defines overall height of bottompane */
background-color: silver;
position: relative;
}
.row {
text-align: center;
}
.features-text {
width: 50%; /* 50% width of the parent directory bottompane */
height: 120px;
display: inline-block;
}
.text-upperright {
width: 50%;
}
.text-upperleft {
width: 50%;
}
.text-bottomleft {
width: 50%;
}
.text-bottomright {
width: 50%;
}
#cat {
float: right;
}
#world {
float: left;
}
#swim {
float: right;
}
#columns {
float: left;
}
h1 {
}
p {
}<div class="bottompane">
<div class="row">
<div class="features-text">
<div class="text-upperleft">
<h1>Best-in-class Features</h1>
<p>Nobody likes this stuff better than us, you can bet your life on that.</p>
</div>
<img src="cat.svg" alt="Cat Picture">
</div>
<div class="features-text">
<div class="text-upperright">
<h1>Reliable Service</h1>
<p>You can count on us to help you whenever you need it. We're talking round the clock service.</p>
</div>
<img src="world.svg" alt="World Map">
</div>
</div>
<div class="row">
<div class="features-text">
<div class="text-bottomleft">
<h1>An Acquired Taste</h1>
<p>It may take a little while for you to warm up to us but once you do you will never want to switch.</p>
</div>
<img src="swim.svg" alt="Person swimming">
</div>
<div class="features-text">
<div class="text-bottomright">
<h1>No Limits</h1>
<p>There are absolutely no limits. We do not throttle. We do not cap.</p>
</div>
<img src="columns.svg" alt="Greek/Roman columns">
</div>
</div>
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-04 03:56:07
我希望这能有所帮助！
<html>
<style>
.bottompane {
width: 100%; /* defines overall width of bottompane */
height: 300px; /* defines overall height of bottompane */
background-color: silver;
position: relative;
}
.row {
text-align: center;
}
.features-text {
width: 50%; /* 50% width of the parent directory bottompane */
height: 120px;
display: inline-block;
position:relative;
float:left;
}
.text-upperright {
width: 50%;
}
.text-upperleft {
width: 50%;
}
.text-bottomleft {
width: 50%;
}
.text-bottomright {
width: 50%;
}
.imageClass{
float:left;
width: 50px;
}
#cat {
float: right;
}
#world {
float: left;
}
#swim {
float: right;
}
#columns {
float: left;
}
h2 {
}
p {
margin-left:35%;
text-align:left;
}
</style>
<div class="bottompane">
<div class="row">
<div class="features-text">
<div class="text-upperleft">
<img src="cat.svg" alt="Cat Picture" class="imageClass">
<h2>Best-in-class Features</h2>
<p>Nobody likes this stuff better than us, you can bet your life on that.</p>
</div>
</div>
<div class="features-text">
<div class="text-upperright">
<img src="world.svg" alt="World Map" class="imageClass">
<h2>Reliable Service</h2>
<p>You can count on us to help you whenever you need it. We're talking round the clock service.</p>
</div>
</div>
</div>
<div class="row">
<div class="features-text">
<div class="text-bottomleft">
<img src="swim.svg" alt="Person swimming" class="imageClass">
<h2>An Acquired Taste</h2>
<p>It may take a little while for you to warm up to us but once you do you will never want to switch.</p>
</div>
</div>
<div class="features-text">
<div class="text-bottomright">
<img src="columns.svg" alt="Greek/Roman columns" class="imageClass">
<h2>No Limits</h2>
<p>There are absolutely no limits. We do not throttle. We do not cap.</p>
</div>
</div>
</div>
</div>
</html>Stack Overflow用户
发布于 2018-06-04 04:07:12
如果你不介意网格，你可以这样做，它要短得多：
<div class="features-text">
<div><img src="swim.svg" alt="Person swimming"></div>
<div>
<h1>An Acquired Taste</h1>
<p>It may take a little while...</p>
</div>
</div>
.bottompane {
width: 100%; /* defines overall width of bottompane */
height: 300px; /* defines overall height of bottompane */
background-color: silver;
position: relative;
display: grid;
grid-template-columns: 50% 50%;
}
.features-text {
width: 90%;
height: 120px;
display: grid;
grid-template-columns: 20px auto;
}并相应地设置填充等。当然，还要删除行div。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50670296
复制相关文章
相似问题