Materializecss：如何使图像在网格内覆盖全宽

时间：2018-07-27 10:07:13

标签： css materialize

我是CSS的新手，请尝试使用物化。我创建2列的行。左列用于图像，右列用于文本。这是我的html结构

<div class="section">
    <div class="row">
      <div class="col s12 m12 l8">
         <img src="imgae_url_here.jpg" alt="" class="responsive-img">
      </div>
      <div class="col s12 m12 l4 headline-right">
        <p class="category">CHROMECAST</p>
        <h2 class="feat-article-title">Here’s to five years of Chromecast</h2>
        <p class="feat-article-summary">Lorem ipsum doler sit amet lorem ipsum doler sit amet lorem ipsum doler sit amet lorem ipsum doler sit amet lorem ipsum doler sit amet...</p>
        <a href="#!" class="btn grey lighten-4 grey-text text-darken-3 z-depth-1 waves-effect btn-headline">READ ARTICLE<i class="material-icons right">arrow_forward</i> </a>
      </div>
    </div>
</div>

图像与行的宽度不同，如下所示。

enter image description here

如何使图像的全宽度与行相同？上面显示的图像中的黄线是我要用该图像覆盖的内容。如何实现的？谢谢！

1 个答案:

答案 0 :(得分：1)

<html>
<head>
<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
</head>
<style>
</style>
<body>
    <div class="row no-padding">
      <div class="col s12 m12 l8" style="overflow:hidden">
        <img src="https://placeimg.com/1080/480/any" style="margin-left:-12px">
      </div>
      <div class="col s12 m12 l4 headline-right">
        <p class="category">CHROMECAST</p>
        <h2 class="feat-article-title">Here’s to five years of Chromecast</h2>
        <p class="feat-article-summary">Lorem ipsum doler sit amet lorem ipsum doler sit amet lorem ipsum doler sit amet lorem ipsum doler sit amet lorem ipsum doler sit amet...</p>
        <a href="#!" class="btn grey lighten-4 grey-text text-darken-3 z-depth-1 waves-effect btn-headline">READ ARTICLE<i class="material-icons right">arrow_forward</i> </a>
      </div>
	  
</body>
</html>

这是您要求的答案。希望对您有所帮助：)如果有任何问题或疑问，请回复我

相关问题
最新问题