物化div并排显示

Question

嘿伙计们我是实现css 的新手。我正在建立一个网站，但我有一个问题是并排排列两个div：一个带有图像，另一个带有文本。这是我的代码和我面临的问题的图片：

<div class="row" style="box-shadow:0 2px 5px 0 rgba(0,0,0,0.16);width:90%;background-color:chocolate;">
          <div class="col s12">
               <img src="img/testifier1.jpg" style="height:400px;width:40%;">
          </div>  
          <div class="col s12">
               <h3>Psalm 119:2</h3>
          </div>
</div>

Answer 1

您应该在类中将列设置为并排。目前您所说的，对于所有屏幕尺寸，（尺寸小和向上）显示每列为12/12，但是您希望每列为6/12，因此对于小屏幕，我们默认每列都是全宽，对于屏幕大于＆＃39;小＆＃39; （m6或中等）我们想要达到6/12尺寸。

<div class="row">
    <div class="col s12 m6">
        <img src="img/testifier1.jpg">
    </div>  
    <div class="col s12 m6">
        <h3>Psalm 119:2</h3>
    </div>
</div>

*请注意m6添加

如果您希望更改html样式的方式，您还应该尝试远离内联样式，并添加修改类。