div如何自定义项目布局

Question

我正在尝试使用div来获取我需要的项目布局，但我无法实现我正在寻找的内容

.skills-container
{
height:50px; /* something like 50px */
padding:5px;
}
.skill-pic
{
width:48px;
height:48px;
}
.skill-content
{
}
.skill-content p
{
}
.progress
{
}

HTML：

<div class="skills-container">
    <div class="skill-pic">
        <img src="img/ps.png" alt="Klematis" width="48" height="48">
    </div>
    <div class="skill-content">
        <p>Photoshop</p>
        <div class="progress">
            <div class="progress-bar progress-success">
            </div>
        </div>
    </div>
</div>

Answer 1

你需要添加float：left;到.skill-pic css。

编辑：有人还指出，这并没有得到你所需要的。您还需要将边框属性添加到元素的css中，如下所示：

边框：纯黑色1px;并用你需要的边框大小替换1px ......你必须玩它。

尝试使用此作为您的CSS：它应该可以工作，您可以调整它...工作JSfiddle here：

.skills-container
{
    display:inline-block;
    border: solid black 4px;
}

.skill-pic
{
    margin:2px;
    float:left;
    width:45px;
    height:45px;
}
img
{
    border: solid black 3px;
    height:45px;
}
.skill-content
{
    height:45px;
    width:200px;
    border: solid black 3px;
    float:left;
    margin:2px 2px 2px 5px;
}
.skill-content > div
{
    margin:2px;
    border: solid black 1px;
}
.progress
{
    margin:2px;
    border: solid black 1px;
}