您好,我有一个部分,左侧是图像,右侧是文本。通过在右侧添加大量文本,图像下方有很多空白区域,直到下一部分,正如我在屏幕截图中显示的那样,圆圈和黑色 X。有没有办法在第一张图片或文字下方放置另一张图片来填补剩余的空白?如果我在另一个下方添加图像代码,它会将所有内容都向下移动。如果我把它放在文本之后,它当然会在文本完成后放置第二张图片。我不知道如何分配列以填补空白,而不是为移动设备打破它。谢谢
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Todo sobre nosotros</title>
<!-- mobile responsive meta-->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="wdt_100 pad_100">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4"><img src="https://ibb.co/nOMPLV" alt="image"></div>
<div class="col-lg-8 col-md-8 col-sm-8 about_desc">
<h3 class="black-color mar_btm30">Nuestra <span class="lytgreen-head">Historia</span></h3>
<p> Desbroces y Limpieza de Fincas nos encontramos en la Sierra de Gredos, en Guisando, un pueblo al sur de la provincia de Avila.
Nuestra radio de trabajo principalmente esta en Castilla y León, Comunidad de Madrid, Toledo, Caceres, aunque hemos realizado trabajos en toda
España: Barcelona, Lérida, Badajoz, Sevilla, Valencia, ...
</p>
<p class="black_txt">Nuestra empresa la compone un equipo de personas profesionales, cualificadas y altamente comprometidas con nuestros clientes que además
transmiten los valores de nuestra marca allá donde van, siendo éstos, servicio, calidad, seriedad y profesionalidad.</p>
<p>Para nosotros la palabra “integral” tiene una connotación de servicio y responsabilidad para con nuestros clientes que va más allá del concepto comercial
que venden otras empresas, ya que nuestra experiencia nos ha enseñado que las necesidades nuestros clientes son más complejas e imprevisibles de lo que se
pueda imaginar, por lo que nuestros parámetros de eficacia, responsabilidad y calidad son siempre los más altos.</p>
<p class="black_txt">Es por eso que le ofrecemos todo un abanico de servicios relacionados a desbroces y limpieza de fincas y parcelas, tanto urbanas como interurbanas.
Vallado de parcelas grandes o pequeñas, en malla galvanizada o en madera tratada contra los elementos.
Podas y remondes de todo tipo: frutales, olivares, pinos, todo clase de arboles en general.
Construimos o restauramos el muro de piedra que tantos años lleva rodeando su finca y se desmorona. </p>
<h4>We Provide All Solutions under one Roof</h4><span class="friendly_customer_Txt">Friendly customer service staff for your all questions!</span><a href="services.html" class="view-all hvr-bounce-to-right slide_contact_btn slide_service_btn mar_lft_zero">OUr Services</a><a href="contact.html" class="view-all hvr-bounce-to-right slide_contact_btn service_mar_left">Contact Us</a>
</div>
</div>
</div>
</div>
</body>
</html>
我希望并为您服务。
我所做的是将图像包含在用于文本的容器中,添加类
img-responsive
并应用属性float: left;
(我还为图像添加了边距)这会将文本移动到您之前离开的空白“洞”下方。
添加
您的代码最初是这样的:
然后,我删除了您的图像具有的所有类,并将其移动到
div
您用于文本的类中。完成后,我在 image tag中应用了类img-responsive
(它是 Bootstrap 的“本机”) 。留下这样的修改:
现在,为了让一切正常工作,您必须将该属性应用于该特定图像
float:left
(边距是可选的)。如何应用该属性取决于您,无论是使用 a
ID
还是在带有 a 的标签内style
。如果您选择第二种方式,它将如下所示: