如何将文本右对齐到图片的右侧，而不使用float:left来避免改变默认父级div的高度？

Question

如何将文本与图像图标右对齐，就像示例图片中的那样。

通常我会使用“float:left”，但这是用于移动响应式设计的，因此我更喜欢不使用像“float:left”这样的东西，因为它会破坏响应式设计中红色div的高度。

我必须对齐标题、副标题和一个小正方形图像。

- Imnotapotato

---

你能展示一下你的HTML/CSS吗？ - Vitorino fernandes

http://jsfiddle.net/366kumc1/ - Imnotapotato

Answer 1

使用float: left很容易，而不会破坏红色边框div的高度。

只需将display: table-cell添加到.app_top块中即可解决问题：

.app_top {
    display: table-cell;
}
.app_top img {
    float: left;
}

请查看实际运行的示例。 这是代码。

- nnn

---

它能够工作，但是图像和文本之间有间隙。 :( - Mahen

Answer 2

你可以使用display: inline-block代替。

#main-container {
  border: 5px solid #3F3F3F;
  width: 270px;
}
.container {
  width: 250px;
  height: 200px;
  border: 5px solid #7F0008;
  margin: 5px;
}
.box {
  display: inline-block;
  vertical-align: top;
  width: 85px;
  height: 85px;
  background: #446C74;
  margin: 5px;
}
.content {
  display: inline-block;
  vertical-align: top;
}
.title, .sub-title {
  margin: 0;
  padding: 3px 10px 3px 0;
}
.title {
  font-size: 17px;
  font-weight: bold;
}
.sub-title {
  font-weight: bold;
  color: #3F3F3F;
}
.img {
  background: url(http://placehold.it/100/25);
  width: 100px;
  height: 25px;
  border: 5px solid #EBEAAE;
}

<div id="main-container">
  <div class="container">
    <div class="box">
    </div>
    <div class="content">
      <p class="title">Title</p>
      <p class="sub-title">Sub-Title</p>
      <div class="img"></div>
    </div>
  </div>
  <div class="container">
    <div class="box">
    </div>
    <div class="content">
      <p class="title">Title</p>
      <p class="sub-title">Sub-Title</p>
      <div class="img"></div>
    </div>
  </div>
</div>

- Weafs.py

Answer 3

内容包含右侧的所有文本。如果使用overflow:hidden，div的高度将保持正常。

img { float:left; }
.content { overflow:hidden; }

- Deivide

Answer 4

也许另一个选择是将属性放在父 Div 中，而非元素中。

HTML:

<div id="wrapper">
    <div class="twoColumn">
         <img src="https://pbs.twimg.com/profile_images/444650714287972352/OXTvMFPl.png" />
    </div>
    <div class="twoColumn">
         <p> this is a testingalot test</p>
          <button> mybutton </button>

    </div>
</div

CSS：

#wrapper{
    border: 1px solid black;
}
.twoColumn{
     width: 49%;
     float:left;
     border: 1px solid red;
}
button{
    width: 50px;
    height: 40px;
    background: red;
 } 

img{ 
   max-width: 100%;
}

http://jsfiddle.net/Equero/df2wvcet/

希望它有所帮助

- Enrique Quero

Answer 5

最简单的解决方案是更改你的标记结构，通过将 spans 包装在一个 div 中，就像你对图像所做的那样，然后添加 .app_top div{display:inline-block} .app_top div span{display:block}

.top{
 width: 95%;
 position: fixed;
 background-color: #f7f7f7;
 padding-top: 10px;
 padding-bottom: 10px;
 padding-left: 3%;
 padding-right: 3%;
 border-bottom: 1px solid #b2b2b2;
}

.search{
 width: 100%;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 border: none;
 background-color: #e3e3e6;
}

.search::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.items{
 background-color: #ffffff;
 width: 100%;
 padding-top: 50px;
}

.app{
 margin-left: 25px;
 margin-right: 25px; 
}
.app_top div{display:inline-block}
.app_top div span{display:block}

<div class="main">
 
 <div class="top" >
  <input type="text" class="search" />
 </div>

<!-- Items -->

 <div class="items" style="border: 1px solid black; padding-top: "> 
  
  <div class="app" style="border: 1px solid red;" > 
  
  <div class="app_top">
   <div> 
    <img src="_img1.jpg" width="95"/>
   </div>
   <div>
                <span class="app_txt" style="border: 1px solid aqua;"> text text - House text house! Las...</span>
   <span class="ltd" style="border: 1px solid pink;"> textic-texttive ltd</span>
   <span class="" style="border: 1px solid blue;"> </span>
            </div>
  </div>
  <div class="app_bottom">
  
  </div>
 </div>
</div>

- Gildas.Tambo