一行中的图像和文本对齐并响应

Question

我正在努力完成

IMG +文本在一行中，就像在此example

中一样

我希望图像能以某种方式响应......所以当我调整窗口大小时，图像仍保留在那里，还有背景文字...... 另外，我需要文本垂直对齐......任何想法？

非常感谢任何帮助！感谢

Answer 1

如果您发布了一些代码，那将是非常好的。我已经做了一个类似的例子，我想分享一下。您需要在这种情况下使用定位。这是一个固定流体的案例：

+-------+-----------+
| FIXED | FLUUUUUID |
+-------+-----------+

或者

+-------+-----------+
| FIXED | FLUUUUUID |
|       | FLUUUUUID |
+-------+-----------+

固定流体模型。在我的片段中，我演示了两种示例。在第一种情况下，流体的尺寸较小。接下来的内容太长了。

<强>段

＆＃13;

＆＃13;

.parent {position: relative; margin: 0 0 15px; border: 1px solid #999; padding: 5px; padding-left: 100px;}
.parent .fixed {position: absolute; left: 5px; width: 90px; background-color: #99f;}
.parent .fluid {background-color: #f99;}

＆＃13;

<div class="parent">
  <div class="fixed">Fixed</div>
  <div class="fluid">Fluid</div>
</div>

<div class="parent">
  <div class="fixed">Fixed</div>
  <div class="fluid">Fluid Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque animi placeat, expedita tempora explicabo facilis nulla fuga recusandae officia, maiores porro eaque, dolore et modi in sapiente accusamus id aut.</div>
</div>

＆＃13;

＆＃13;

＆＃13;

工作代码段

＆＃13;

＆＃13;

.parent {position: relative; margin: 0 0 15px; padding: 5px; padding-left: 100px; min-height: 50px;}
.parent .fixed {position: absolute; left: 5px; width: 90px; background-color: #99f;}
.parent .fluid {}

＆＃13;

<div class="parent">
  <div class="fixed">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADsUlEQVR4nO3aS4gcVRTG8TsTgjMxCCoYo1ExulCjLjRCGElwISooLgRF1JWjIaIYooIQH5gsghtfIBoiAWeCCLoRxYX4IAjqJkpEXWlAUUQUQWMyMer0z0VVOzVl3X5NV3dPT/2hF9P3u4dzvuqpOvfWDaGioqKioqKiYgDBJjyMLTi13/n0DIzjdfP5BTf0O7eegOcUcxjn9ju/UsEYjkUMgB39zrFUcFaD4uHlfudYKji7iQFT/c6xNHAS3l2SBmAVPmlS/PAZgBFsxm8tFD9cBuBMvNFi4cNjAM7DNP5qs/jFbQBW41nMdFD44jQAo7gWr+H4Agrv2ACsxc162UViPZ7CD10oumMD8Dhm07k17Cyj2DFcjSckz/E/ulx0RwbgskiMG/PCk3E9NmKkSdDVabFbsQcf4fcSC85TaABWYGXuu8lIjEMYq4suxU+ZwTcxgVsla/EX8Da+wtGSimqHqVyRJ0guxHH8g30YT8eubBDnznqAZq3noJE34OkCzXRm/MNInI/rgp9LS7Uc8gZ8U6CpYUM6fkX6dxEXBK23oINC3oADEd2rGc37Ec29QW9vYN0gb8DmiO5PrEg1d0c000G5j6wyyBuwHN9GtFelmosj4wcDjpSRZYn87zGI5yPae9LxZeaaoSzfBwvry/tBkQFbI9rHMppfC8ZngsYbkINIkQEPRrSPZDRFN/sjQXcWKL2kyIDdEe2WzH2i6FH4XcDfZWVaEvmb4ErFP2+YSDWxNcGnQdI+LibyBtwX0c2Ya4nvj2j2BvEuaVDJG/BlRLcvo/ksopkcBgOK9htmcXk6vikSp4bzA74uKdGyyBvwYoFmTzo2is8jcfbXA9xufpMQ6wyPNRjrJXkDxiVL4FnJ/WzK3P/+dQ3i3JYNMiHZvnoA6yITjuI0yaurayTNx27s19sVZWxDZAwn5r6LNUgHsawoTn3ij5GJ70jdzWiXS65Ar2hnS2yiYH4NG5tN3NUggUPYjlvwEL5ooD1g/m5TN2h3U3SXuRv9LLa3Mul0C18jzGCN5Bdyk2RbrRs9Ryfb4hdJtsUvbGfSXQtMdFtBzDWSK7KQvcXevRjBMx0muRejDeKegZd09ovo7ZshPKr19cIsdjQqPhd7HT4YaAPSRC/BWw2MqOE9rO8g9ojkGNzhgTUgk+wq3IGdeDL9TGJtF2KfI77BORgGlI3kJccrS9aAEJb4IakQqmNy1UHJEJb4UdkQqsPS/4EN2CZ59J7S73wqKioqKioqhot/AedCJIQMIKG9AAAAAElFTkSuQmCC"/></div>
  <div class="fluid">The Text</div>
</div>
<div class="parent">
  <div class="fixed">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADsUlEQVR4nO3aS4gcVRTG8TsTgjMxCCoYo1ExulCjLjRCGElwISooLgRF1JWjIaIYooIQH5gsghtfIBoiAWeCCLoRxYX4IAjqJkpEXWlAUUQUQWMyMer0z0VVOzVl3X5NV3dPT/2hF9P3u4dzvuqpOvfWDaGioqKioqKiYgDBJjyMLTi13/n0DIzjdfP5BTf0O7eegOcUcxjn9ju/UsEYjkUMgB39zrFUcFaD4uHlfudYKji7iQFT/c6xNHAS3l2SBmAVPmlS/PAZgBFsxm8tFD9cBuBMvNFi4cNjAM7DNP5qs/jFbQBW41nMdFD44jQAo7gWr+H4Agrv2ACsxc162UViPZ7CD10oumMD8Dhm07k17Cyj2DFcjSckz/E/ulx0RwbgskiMG/PCk3E9NmKkSdDVabFbsQcf4fcSC85TaABWYGXuu8lIjEMYq4suxU+ZwTcxgVsla/EX8Da+wtGSimqHqVyRJ0guxHH8g30YT8eubBDnznqAZq3noJE34OkCzXRm/MNInI/rgp9LS7Uc8gZ8U6CpYUM6fkX6dxEXBK23oINC3oADEd2rGc37Ec29QW9vYN0gb8DmiO5PrEg1d0c000G5j6wyyBuwHN9GtFelmosj4wcDjpSRZYn87zGI5yPae9LxZeaaoSzfBwvry/tBkQFbI9rHMppfC8ZngsYbkINIkQEPRrSPZDRFN/sjQXcWKL2kyIDdEe2WzH2i6FH4XcDfZWVaEvmb4ErFP2+YSDWxNcGnQdI+LibyBtwX0c2Ya4nvj2j2BvEuaVDJG/BlRLcvo/ksopkcBgOK9htmcXk6vikSp4bzA74uKdGyyBvwYoFmTzo2is8jcfbXA9xufpMQ6wyPNRjrJXkDxiVL4FnJ/WzK3P/+dQ3i3JYNMiHZvnoA6yITjuI0yaurayTNx27s19sVZWxDZAwn5r6LNUgHsawoTn3ij5GJ70jdzWiXS65Ar2hnS2yiYH4NG5tN3NUggUPYjlvwEL5ooD1g/m5TN2h3U3SXuRv9LLa3Mul0C18jzGCN5Bdyk2RbrRs9Ryfb4hdJtsUvbGfSXQtMdFtBzDWSK7KQvcXevRjBMx0muRejDeKegZd09ovo7ZshPKr19cIsdjQqPhd7HT4YaAPSRC/BWw2MqOE9rO8g9ojkGNzhgTUgk+wq3IGdeDL9TGJtF2KfI77BORgGlI3kJccrS9aAEJb4IakQqmNy1UHJEJb4UdkQqsPS/4EN2CZ59J7S73wqKioqKioqhot/AedCJIQMIKG9AAAAAElFTkSuQmCC"/></div>
  <div class="fluid">A longer text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus magni ipsam facilis laboriosam nesciunt eveniet obcaecati dicta laborum voluptatem reiciendis, possimus vel enim. Dignissimos assumenda ipsa aut. Facere, unde animi.</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这可能对您有所帮助，以后您可以使用媒体查询进行控制，并将您的图片或内容放在任何地方。

.img-text {
  width: 100%;
  display: table;
  table-layout: fixed;
}
.photo,
.content {
  display: table-cell;
  vertical-align: middle;
}
.photo {
  width: 40%;
}
.photo img {
  max-width: 100%;
  height: auto;
}
.content {
  width: 60%;
  padding: 15px;
}

<div class="img-txt">
  <div class="photo">
    <img src="http://lorempixel.com/image_output/people-q-c-640-480-6.jpg" alt="">
  </div>
  <div class="content">
    <h1>Something</h1>
    <p>Something more</p>
    <p>You should have tried yourself first, then asked with your code as example</p>
  </div>
</div>

Answer 3

.imgBox, .textBox{
  float: left;
  box-sizing: border-box;
}
.textBox{
 height: 70px;
 width: 100px;
 background-color: grey;
 color: white;
 text-align: center;
 padding-top: 25px;
}

<div>
  <div class="imgBox">
    <img        src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" width="100" height="70"/>
  </div>
  <div class="textBox">
  your text
  </div>
</div>