Question

我有一个网站的一部分需要一个小图像与文本并排放置联系信息。它需要看起来像这样 -

此刻它看起来像这样 -

我尝试了一些不同的定位方面，但似乎无法修复它。这是目前为止的相关代码 -

HTML

<div class="six columns">
                    <h2>To start getting great advice, get in touch.</h2>
                        <div class="phone">
                            <img src="images/phone.png">
                            <p>0113 220 5265</p>
                        </div>
                        <div class="email">    
                            <img src="images/email.png">
                            <p>hello@featuremedia.co.uk</p>
                        </div>    
                        <img src="images/Logo.png" style="width:250px;height:30px; margin-top: 20px;">
            </div>

CSS

section#form h2 {
    font-size: 15px;
    margin-top: 40px;
}

.phone {
    float: left;
    margin-right: 100px;

}

.email {
    float: left;

}

我仍然需要重新调整图像的大小，但我主要担心的是让图像与文本一起正确放置，就像上面的第一张图片一样。

Answer 1

将display: inline-block添加到您的img和p元素中。

section#form h2 {
  font-size: 15px;
  margin-top: 40px;
}

.phone {
  float: left;
  margin-right: 100px;
}

.email {
  float: left;
}

p,
img {
  display: inline-block;
}

/*Extra CSS to mimic your container*/
.six.columns {
  width: 300px;
}

<div class="six columns">
  <h2>To start getting great advice, get in touch.</h2>
  <div class="phone">
    <img src="images/phone.png">
    <p>0113 220 5265</p>
  </div>
  <div class="email">
    <img src="images/email.png">
    <p>hello@featuremedia.co.uk</p>
  </div>
  <img src="images/Logo.png" style="width:250px;height:30px; margin-top: 20px;">
</div>

Answer 2

由于其他答案使用的是flexbox或inline-block，因此您可以按原样使用浮点数。

请记住，在您的HTML中，您试图浮动图片和电话号码，这些号码包含在div .phone和.email中。所以不要浮动.phone和.email，浮动他们的内容：

.phone img, .phone p, .email img, .email p {
  float: left;
}

之后，这是一个边缘问题，也是clearfixing div的问题，这样他们就可以占据孩子的全部高度并落入水平列。

＆＃13;

section#form h2 {
  font-size: 15px;
  margin-top: 40px;
}
.phone img, .phone p, .email img, .email p {
  float: left;
}
.email {
  margin-top: 10px;
}
.phone p, .email p {
  margin: 3px 0 0 10px;
}
.phone::after, .email::after { /*clearfix*/
  content: '';
  display: table;
  clear: both;
}

＆＃13;

<div class="six columns">
  <h2>To start getting great advice, get in touch.</h2>
  <div class="phone">
    <img src="http://placehold.it/25x25">
    <p>0113 220 5265</p>
  </div>
  <div class="email">
    <img src="http://placehold.it/25x25">
    <p>hello@featuremedia.co.uk</p>
  </div>
  <img src="http://placehold.it/250x30" style="width:250px;height:30px; margin-top: 20px;">
</div>

＆＃13;

Answer 3

您需要使用以下样式： https://jsfiddle.net/56n074g6/1/

.phone p,
.email p {
  display: flex;
  align-items: center;
  margin: 0 6px;
}

.phone,
.email {
  display: flex;
  margin-bottom: 6px;
}

<div class="six columns">
  <h2>To start getting great advice, get in touch.</h2>
  <div class="phone">
    <img src="http://via.placeholder.com/30x30">
    <p>0113 220 5265</p>
  </div>
  <div class="email">
    <img src="http://via.placeholder.com/30x30">
    <p>hello@featuremedia.co.uk</p>
  </div>
  <img src="http://via.placeholder.com/150x75" style="width:250px;height:30px; margin-top: 20px;">
</div>

Answer 4

由于您在这些容器上使用float，添加clear: both;将确保左侧和右侧没有浮动元素（占据整行）。

同样p是一个块元素，您可以将其更改为内联或只使用span

＆＃13;

section#form h2 {
    font-size: 15px;
    margin-top: 40px;
}

.phone {
    float: left;
    margin-right: 100px;
}

.email, .mylogo {
    clear: both;
    float: left;
}

＆＃13;

<div class="six columns">
  <h2>To start getting great advice, get in touch.</h2>
  <div class="phone">
    <img src="images/phone.png">
    <span>0113 220 5265</span>
  </div>
  <div class="email">
    <img src="images/email.png">
    <span>hello@featuremedia.co.uk</span>
  </div>
  <div class="mylogo">
    <img src="images/Logo.png" style="width:250px;height:30px; margin-top: 20px;">
  </div>
</div>

＆＃13;

Answer 5

现在使用flexboxes很容易

＆＃13;

ReplySignature

＆＃13;

.row {
  display: flex;
  align-items: center;
}

＆＃13;

Answer 6

<style> 
.sameline{display:inline-block}
<\style>

<div>

<div class="sameline">
<img src="" />
</div>

<div class="sameline">
<p>text</p>
</div>

</div>

这将完美无缺

Answer 7

你可以使用bootstrap来做到这一点。因为它根据宽度将一行分成列。为了更多的参考，你可以检查 http://getbootstrap.com/getting-started/

CSS - 将图像与文本一起定位

7 个答案: