Question

这一定是非常基本的，但它一直在努力。这是我想要实现的基本形象

我有一个宽度为100％的容器div。我有一段文字，我把它放在一个段落标签中，下面是一些输入字段和一个按钮。所有这一切都应该集中。我的图像应该位于文本和字段的右侧，并且与这两个div的高度大致相同。

当视口调整大小时，图像应保持锚定到文本末尾和输入字段 - 大约20px远。如果我用％宽度漂浮容器，当窗口大小增加时它会继续漂移吗？

我尝试了以下内容：

容器的外部div和两个内部div，一个向左浮动（包含文本和输入），另一个向右浮动（带图像）
一个外部容器，里面有3个独立的div，1个用于100％宽度的文本行，后面是另一个用于输入字段宽度70％，最终div宽度为30％用于图像。
一个内部有一个div的容器。段落内的文本和图像，手动定位图像，然后是输入字段。

和许多其他类似的变化，但不知何故，我仍然无法得到我正在寻找的东西。

这样做的正确方法是什么？它看起来如此简单，但在经过数小时的摆弄之后仍然无法避开。请记住，此代码将存在于响应式模板中，因此我不希望使用固定值或定位。我需要将输入重新堆叠在一起，并将右侧的图像重新调整为移动断点（但现在这与我认为无关）。

任何帮助都非常感谢这项任务让我感到越来越愚蠢！我必须遗漏一些相当基本的东西.. 这是一个小提琴示例，任何人都可以随意编辑。 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>

Answer 1

你能做什么：

将您的.myImage浮动到右侧
将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）

Answer 2

您可以尝试this

之类的内容

HTML

.inner {
  width: 50%;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 10px;
  font-size: 0;
}
.container {
  width: 100%;
  background-color: beige;
}
.left {
  display: inline-block;
  width: 80%;
  font-size: 16px;
}
.right {
  display: inline-block;
  width: 20%;
}

<div class="container">
  <div class="inner">
    <div class="left">
      <p class="textSignup">
        Get the latest tips on an interesting subject and a FREE extract from our Guide
      </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 class="right">
      <img class="myImage" src="http://www.vapld.info/images/ys/books.png" width="100" height="65">
    </div>
  </div>

</div>

Answer 3

https://jsfiddle.net/vytnLbdu/

我的输出看起来很像你的模型。我们只是将您的图像移动到2列容器的第二列。文本和输入字段之间的行使用<br>标记完成。

<div class="container">
  <div class="left">
    <p class="textSignup">Get the latest tips on an interesting subject and a FREE extract from our Guide</p><br>
    <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 class="right">
    <img class="myImage" src="http://www.vapld.info/images/ys/books.png" width="100"     height="65">
  </div>
</div>

的CSS：

.left 
  {
      float: left;
      width: 60%;
      margin: 0 auto;
      text-align:center;
      padding-bottom: 10px;
  }
  .right{
    width:40%;
    float:right;
  }

  .container 
  {
    width: 100%;
    background-color:beige;
  }

  .myImage 
  {
   padding-top: 10px;
  }

Answer 4

您可以使用带有绝对定位的内联块来实现与您的设计类似的功能。值得注意的是，在网页设计中没有“正确”的做法 - 只有一些方法“如果可能的话应该避免”。

.inner {
  margin: 0 auto;
  text-align: center;
  padding-bottom: 20px;
  padding-top: 20px;
  position: relative;
  display: inline-block;
}
.container {
  width: 100%;
  text-align: center;
  background-color: beige;
}
.myImage {
  padding-top: 10px;
}
.inner img {
  position: absolute;
  left: 100%;
  top: 0;
}

<div class="container">
  <div class="inner">
    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">

    <br>
    <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>

CSS - 将图像与两个div对齐的正确方法

4 个答案:

演示