html - 如何在同一行上制作3张图片，然后在下面制作3个段落

我将页面分为两个部分，分别位于标题下方和滑块下方的左侧。我必须有3张图片，每张图片下方都有一个固定宽度的段落。

<div class="Main-content-float-left">
        <h1 class="contentheader1">  vitae, justo. Nullam dictum viverra quis, feugiat a, tellus. Phasellu</h1>
        <div class="column-center"><img src=" 190x130.gif" img class="190x130"/></br>sdefererfreresdefererfrerevsdefererfrere</div>
        <div class="column-left"><img src=" 190x130.gif" img class="190x130"/></br>sgrrjtijt5r09itrioktrsdefererfreresdefererfrere</div>
        <div class="column-right"><img src=" 190x130.gif" img class="190x130"/></br>sroijoitjroijtroijtoirjsdefererfrerev</div>
        </br>

CSS：

.column-left{ display: inline-block;  }
.column-right{ display: inline-block;  }
.column-center{ display: inline-block;  }

.190x130{
display:inline-block;
}

最佳答案

您走在正确的轨道上，但是使用的代码太多，可能会造成混乱。方法如下：

首先设置3个div：

<div class="main-content">
    <h1>Title</h1>

    <div class="column">
        <img src="http://placehold.it/190x130" />
        <p>This is a paragraph. Yay!</p>
    </div>

    <div class="column">
        <img src="http://placehold.it/190x130" />
        <p>This is a paragraph. Yay!</p>
    </div>

     <div class="column">
        <img src="http://placehold.it/190x130" />
        <p>This is a paragraph. Yay!</p>
    </div>
</div>

现在开始简单的部分：使用一个类column内联放置所有图像div：

.column {
    display: inline-block;
}

工作示例：http://jsfiddle.net/enogfnup/