Question

我是一个完全迷失CSS的后端开发人员。这次我无法获得更接近图像的文字。我需要的是文字紧挨着图像，我知道它一定很容易，但我已经尝试过了。

所以这就是我想要的：

               |------|
          Text |Image |
               |------|

这就是我得到的：

               |------|
      Text     |Image |
               |------|

我确实需要将图像浮动到右侧，here是一个小提琴，您可以在其中找到代码和结果。

这是代码：

HTML
<div class = "div_image pull-right">
    <a class = "topic_name" href = "">
    Topic</a>
    <div class = "image image_topic">
        <img src = "http://mybirdie.ca/files/att00052trees-around-the-world.jpg">
    </div>
</div>

CSS:
.div_image{
  width: 170px;
  height: 150px;
  display: inline-block;
}
.topic_name{
  margin-right: 0px;
  margin-top: 12px;
  position: absolute;
  text-align: right;
  border: 1px solid red;  
}
.image_topic{
  margin-left: 0px;
  border: 1px solid red;
  float: right
}

.image > img{
    display: inline-block;
    max-width: 45px;
    max-height: 45px;
    padding: 0px;
    margin: 0px;
    width:auto;
    border-top-left-radius: 10px 5px;
    border-bottom-right-radius: 10% 5%;
    border-top-right-radius: 10px;
}

我错过了什么？

Answer 1

图像向右拉，但文字不是。然而，周围的div比两者都宽...所以文本位于它通常所在的位置（在左侧），图像向右拉（右侧到周围div的边缘）。

如果您希望文本位于图像旁边 - 它可能也应该是向右拉（也可以删除绝对定位）。

以下适用于我。请注意，我必须将文本和图像拉到右边......并翻转它们的顺序，以便它们在完成后以正确的顺序显示。

<div class="div_image pull-right">
    <div class = "image image_topic pull-right">
        <img src = "http://mybirdie.ca/files/att00052trees-around-the-world.jpg">
    </div>
    <a class="topic_name pull-right" href = "">Tema</a>
</div>

.div_image{
  width: 170px;
  height: 150px;
  display: inline-block;
}
.topic_name{
  margin-right: 0px;
  margin-top: 12px;
  border: 1px solid red;
}
.image_topic{
  margin-left: 0px;

Answer 2

我不知道如何使用它，但这就是我要这样做的方式：

DEMO：http://jsbin.com/kator/1/edit

enter image description here

CSS / nice和small：

.div_image{padding:10px;}
.div_image a {display:inline-block;padding:5px 10px 0 0}
.div_image img {max-width:45px;max-height:45px}
.div_image .image {float:right;}

.clear {clear:both;} /* demo */

HTML - 与OP

的订单相同

<div class = "div_image clearfix pull-right">
 <a class = "topic_name" href = ""> Topic</a>
 <div class = "image image_topic">
  <img src = "http://mybirdie.ca/files/att00052trees-around-the-world.jpg">
 </div>
</div>

<br class="clear">

<div class = "div_image clearfix pull-right">
 <a class = "topic_name" href = ""> Topic goes here what if it's long</a>
 <div class = "image image_topic">
  <img src = "http://mybirdie.ca/files/att00052trees-around-the-world.jpg">
 </div>
</div>

如果您需要使用包装器，可以执行以下操作：

DEMO：http://jsbin.com/vaduti/1/edit

enter image description here

带有包装器的CSS

.div_image {
    width: 170px;
    height: 150px;
    display: inline-block;
    border: 1px dotted blue;
    margin: 10px; /*demo only*/
}

.div_image a {
    display: inline-block;
    padding: 5px 55px 0 0;
    text-align: right;
}

.div_image img {
    max-width: 45px;
    max-height: 45px;
}

.div_image .image {
    float: right;
    margin-left: -45px;
}

.clear {
    clear: both
}

/* demo */

.div_image > div {
    float: right
}

带有包装器和内部div的HTML

<div class = "div_image clearfix pull-right">
  <div>
 <a class = "topic_name" href = ""> Topic</a>
 <div class = "image image_topic">
  <img src = "http://mybirdie.ca/files/att00052trees-around-the-world.jpg">
 </div>
  </div>
</div>

Answer 3

我认为问题来自.topic中的css规则“position：absolute”。当我删除它并添加float：right时，它会正确呈现，除了文本和图像的顺序。因此在切换top_name和image_topic的顺序之后。它应该按你的意愿工作。

HTML
<div class = "div_image pull-right">
    <div class = "image image_topic">
        <img src = "http://mybirdie.ca/files/att00052trees-around-the-world.jpg">
    </div>
    <a class = "topic_name" href = "">
    Topic</a>
</div>

CSS:
.div_image{
  width: 170px;
  height: 150px;
  display: inline-block;
}

.topic_name{
  margin-right: 0px;
  margin-top: 12px;
  float: right;
  text-align: right;
  border: 1px solid red;  
}
.image_topic{
  margin-left: 0px;
  border: 1px solid red;
  float: right
}

.image > img{
    display: inline-block;
    max-width: 45px;
    max-height: 45px;
    padding: 0px;
    margin: 0px;
    width:auto;
    border-top-left-radius: 10px 5px;
    border-bottom-right-radius: 10% 5%;
    border-top-right-radius: 10px;
}

Answer 4

    either reduce the width:

.div_image {
display: inline-block;
height: 150px;
width: 89px;
}

OR

add margin left in the text

.topic_name {
border: 1px solid red;
margin-left: 85px;
margin-right: 0;
margin-top: 12px;
position: absolute;
text-align: right;
}

</pre>

CSS。无法使文本更接近图像。帮帮我理解

4 个答案: