Html 如何在不使用 float:left 的情况下将文本与 img 的右侧对齐，这样它就不会更改默认的父 div 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27468476/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to align text to the right side of an img without using float:left so it wont change the default parent div height
提问by Rick Sanchez
How to I align text to the right side of the image icon like the one in the example picture.
如何将文本与示例图片中的图像图标右侧对齐。
I would usually use "float:left" but it's for a mobile responsive design so I prefer not using things like "float:left" because it ruins the red divs height with responsive designs.
我通常会使用“ float:left”，但它用于移动响应式设计，所以我不喜欢使用诸如“ float:left”之类的东西，因为它会破坏div响应式设计的红色高度。
I have to align the title, subsitle and a little square image.
我必须对齐标题、副标题和一个小方形图像。
采纳答案by ntk
It is easy to use float: left and NOT break the height of red border div.
很容易使用 float: left 并且不会破坏红色边框 div 的高度。
You only have to add display: table-cellto the .app_topblock. Here's the solution:
您只需将display: table-cell添加到.app_top块。这是解决方案：
.app_top {
display: table-cell;
}
.app_top img {
float: left;
}
See the working example. Here's the code.
请参阅工作示例。这是代码。
回答by Weafs.py
You could use display: inline-blockinstead.
你可以用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>回答by Gildas.Tambo
Most simple solution would be to change your markup structure by wrapping your spansin a div just the way you did with the image, then add .app_top div{display:inline-block} .app_top div span{display:block}
最简单的解决方案是通过将您的标记结构包装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>回答by Deivide
.content contains all text in right side. If you use overflow:hidden the height of div will stay normal.
.content 包含右侧的所有文本。如果使用溢出：隐藏 div 的高度将保持正常。
img { float:left; }
.content { overflow:hidden; }
回答by Enrique Quero
Maybe another option is to put the attribute in a parent div instead of the element
也许另一种选择是将属性放在父 div 而不是元素中
html:
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:
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/
http://jsfiddle.net/Equero/df2wvcet/
I hope it's help
我希望它有帮助
