CSS包装时缩进图像下方的文本

Question

我有以下模式，当它弹出时，文本左侧有一个图像。我想要的是让文本与上面的文本内联，而不是在图像下面。 以下是它现在的样子

这是我希望它看起来如何

我的HTML就像：

＆＃13;

＆＃13;

.download-file-icon {
    height: 50px !important;
    vertical-align: middle !important;
    margin-right: 5px;
    margin-left: 0px;
}
.download-file-text {
    color: #828282;
}
.download-area-text {
    padding: 10px !important;
    font-size: 19px !important;
}

.download-area-div{
   
}

＆＃13;

<div class="download-area-div"><img src="https://placeholdit.imgix.net/~text?txtsize=5&txt=30%C3%9730&w=20&h=20" class="download-file-icon"><a class="download-file-text" href="http://aFC-LN_20160830.pdf" target="_system" style="
    /* width:  100% !important; */
">File One with a really really really really really really really really really really really really really really really really really long filename that wraps</a> <br> <br><hr> <br></div><div class="download-area-div"><img src="https://placeholdit.imgix.net/~text?txtsize=5&txt=30%C3%9730&w=20&h=20" class="download-file-icon"><a class="download-file-text" href="ac-model-1.xlsx" target="_system">All good </a> <br> <br> <br></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

<2> Soluton＃1

在img上设置position:absolute，然后在容器上留下一些padding-left

＆＃13;

＆＃13;

.download-file-icon {
    height: 50px !important;
    vertical-align: middle !important;
    margin-right: 5px;
    margin-left: 0px;
}
.download-file-text {
    color: #828282;
}
.download-area-text {
    padding: 10px !important;
    font-size: 19px !important;
}

.download-area-div{
   padding-left: 70px;
  position: relative;
}
img {
  position: absolute;
  left: 10px;
  }

＆＃13;

<div class="download-area-div"><img src="https://placeholdit.imgix.net/~text?txtsize=5&txt=30%C3%9730&w=20&h=20" class="download-file-icon"><a class="download-file-text" href="http://aFC-LN_20160830.pdf" target="_system" style="
    /* width:  100% !important; */
">File One with a really really really really really really really really really really really really really really really really really long filename that wraps</a> <br> <br><hr> <br></div><div class="download-area-div"><img src="https://placeholdit.imgix.net/~text?txtsize=5&txt=30%C3%9730&w=20&h=20" class="download-file-icon"><a class="download-file-text" href="ac-model-1.xlsx" target="_system">All good </a> <br> <br> <br></div>

＆＃13;

＆＃13;

＆＃13;

解决方案＃2

使用flexbox

＆＃13;

＆＃13;

.download-file-icon {
    height: 50px !important;
    vertical-align: middle !important;
    margin-right: 5px;
    margin-left: 0px;
    flex: 0 0 50px;
}
.download-file-text {
    color: #828282;
}
.download-area-text {
    flex:1;
}

.download-area-div{
   display:flex;
   align-items: center;
}

＆＃13;

<div class="download-area-div"><img src="https://placeholdit.imgix.net/~text?txtsize=5&txt=30%C3%9730&w=20&h=20" class="download-file-icon"><a class="download-file-text" href="http://aFC-LN_20160830.pdf" target="_system" style="
    /* width:  100% !important; */
">File One with a really really really really really really really really really really really really really really really really really long filename that wraps</a> <br> <br><hr> <br></div><div class="download-area-div"><img src="https://placeholdit.imgix.net/~text?txtsize=5&txt=30%C3%9730&w=20&h=20" class="download-file-icon"><a class="download-file-text" href="ac-model-1.xlsx" target="_system">All good </a> <br> <br> <br></div>

＆＃13;

＆＃13;

＆＃13;

解决方案＃3

通过浮动图像并在相邻元素上添加overflow:hidden来创建新的块格式化上下文（请参阅this post）

＆＃13;

＆＃13;

.download-file-icon {
    height: 50px !important;
    vertical-align: middle !important;
    margin-right: 5px;
    margin-left: 0px;
}
.download-file-text {
    color: #828282;
}
.download-area-text {
    padding: 10px !important;
    font-size: 19px !important;
    overflow: hidden;
}

.download-area-div{
   padding-left: 70px;
  position: relative;
}
img {
  float: left;
  }

＆＃13;

<div class="download-area-div"><img src="https://placeholdit.imgix.net/~text?txtsize=5&txt=30%C3%9730&w=20&h=20" class="download-file-icon"><a class="download-file-text" href="http://aFC-LN_20160830.pdf" target="_system" style="
    /* width:  100% !important; */
">File One with a really really really really really really really really really really really really really really really really really long filename that wraps</a> <br> <br><hr> <br></div><div class="download-area-div"><img src="https://placeholdit.imgix.net/~text?txtsize=5&txt=30%C3%9730&w=20&h=20" class="download-file-icon"><a class="download-file-text" href="ac-model-1.xlsx" target="_system">All good </a> <br> <br> <br></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您应该将两个内部列向左浮动（确保在浮动元素之后清除浮动），并为每个列提供百分比宽度。列的宽度由您决定，它不会影响图像本身的宽度。但是，两列的宽度应该相同，并且需要浮动到左侧。

.download-file-icon {
    height: 50px !important;
    vertical-align: middle !important;
    margin-right: 5px;
    margin-left: 0px;
}
.download-file-text {
    color: #828282;
}
.download-area-text {
    padding: 10px !important;
    font-size: 19px !important;
}
.download-area-img {
  width: 10%;
  float: left;
}

.download-area-desc {
  width: 90%;
  float: left;
}
.clear {
  clear: both;
  float: none;
}

<div class="download-area-div">
  <div class="download-area-img">
    <img src="https://placeholdit.imgix.net/~text?txtsize=5&txt=30%C3%9730&w=20&h=20" class="download-file-icon">
  </div>
  <div class="download-area-desc">
    <a class="download-file-text" href="http://aFC-LN_20160830.pdf" target="_system">File One with a really really really really really really really really really really really really really really really really really long filename that wraps</a>
  </div>
</div>
<div class="clear"></div>
<hr><br>
<div class="download-area-div">
  <div class="download-area-img">
    <img src="https://placeholdit.imgix.net/~text?txtsize=5&txt=30%C3%9730&w=20&h=20" class="download-file-icon">
  </div>
  <div class="download-area-desc">
    <a class="download-file-text" href="ac-model-1.xlsx" target="_system">All good </a>
  </div>
</div>
<div class="clear"></div>