这一定是非常基础的,但它一直让我费尽心思。 这是我要实现的目标的基本图像
我有一个宽度为 100% 的容器 div。 我有一段文字,我把它放在一个段落标签下面,下面是一些输入字段和一个按钮。所有这些都应该居中。 我有一张图片,它应该位于文本和字段的右侧,并且与这两个 div 的高度大致相同。
当视口(viewport)变大时,图像应保持锚定在文本和输入字段的末尾 - 大约 20 像素的距离。如果我以 % 宽度 float 容器,它会随着窗口大小的增加而继续漂移吗?
我尝试了以下方法:
- 一个用于容器的外部 div 和两个内部 div,一个向左浮动(包含文本和输入),另一个向右浮动(包含图像)
- 一个外部容器,内部有 3 个独立的 div,1 个用于文本行,宽度为 100%,然后另一个用于输入字段,宽度为 70%,最终的 div 宽度为图像的 30%。
- 一个容器,里面有一个 div。段落内的文本和图像并手动定位图像,然后是输入字段。
和许多其他类似的变体,但不知何故我仍然无法得到我正在寻找的东西。
正确的做法是什么?它看起来很简单,但经过几个小时的摆弄后,我仍然无法理解。 请记住,此代码将存在于响应式模板中,因此我不希望使用固定值或定位。一旦调整到移动断点,我将需要重新设置输入的样式以与右侧的图像堆叠在一起(但我认为目前这无关紧要)。
对于这项让我感到越来越愚蠢的任务,非常感谢任何帮助!我一定错过了一些相当基本的东西.. 这是一个 fiddle 示例,任何人都可以随意编辑。 Fiddle
.inner {
margin: 0 auto;
text-align:center;
padding-bottom: 10px;
}
.container {
width: 100%;
background-color:beige;
}
.myImage {
padding-top: 10px;
}
<div class="container">
<div class="inner">
<p class="textSignup">
Get the latest tips on an interesting subject and a FREE extract from our Guide
<img class="myImage" src="http://www.vapld.info/images/ys/books.png" width="100" height="65">
</p>
<input type="text" name="FNAME" placeholder="Your first name" id="firstName">
<input type="email" name="EMAIL" size="11" placeholder="Your email" required="">
<input type="submit" value="Download my free ebook">
</div>
</div>
最佳答案
你可以做什么:
- 将你的
.myImage
float 到右边 - 添加 clearfix到
.inner
演示
.inner {
margin: 0 auto;
text-align:center;
padding-bottom: 10px;
max-width: 560px;
}
.inner:before,.inner:after {
content: "";
display: table;
}
.inner:after {
clear: both;
}
.container {
width: 100%;
background-color:beige;
}
.textSignup {
padding-bottom : 15px;
}
.myImage {
padding-top: 10px;
float:right;
}
<div class="container">
<div class="inner">
<p class="textSignup">
Get the latest tips on an interesting subject and a FREE extract from our Guide
<img class="myImage" src="http://www.vapld.info/images/ys/books.png" width="100" height="65">
</p>
<input type="text" name="FNAME" placeholder="Your first name" id="firstName">
<input type="email" name="EMAIL" size="11" placeholder="Your email" required="">
<input type="submit" value="Download my free ebook">
</div>
</div>
(另见 this Fiddle)
关于html - CSS - 将图像与两个 div 对齐的正确方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36178931/