jquery - 尝试在 css 中组合 div

Question

我正在尝试合成一个 768x240 的窗口。我有这个(一个例子):

<div class="global-tab">
   <div class="image" src="link"></div>
   <div class="class1">{{details.name}}</div>
   <div class="class2">{{details.location}}</div>   
</div>

在 CSS 中:

.image {
    display: inline-block;
    width: 29.6875%;
    height: 60%;
    padding: 5.208% 3.6458% 3.6458% 2.08%;
}

.class1 {
    display: inline-block;
    font-family: "Arial";
    font-size: 20px;
}

.class2 {
    display: inline-block;
    font-family: "Arial";
    font-size: 12px;
}

图像向左，class1 和 class2 在右侧(文本在图像中间以行高居中)。我正在尝试放置边距、填充和对齐这些文本，但我无法按照该顺序组成 div，我也不知道为什么。

有什么帮助吗？谢谢!!

Answer 1

好的，首先您必须正确设置 DOM。所以，我要做的是将它放在两列中(如果我理解，那就是你想要的)。而且很简单，你只需要知道盒子模型就可以了。

其次，您不需要图像的 DIV(实际上，这不是插入图像的方式，您必须使用 <img> 标签，属性“src”所在的位置)

并且，尽量不要对这种十进制数字使用宽度和填充。以后可能会出问题。

这是我为你做的。这更简单，希望这是你需要的。

这里我会把 html 和 css 留给你。

<div class="global-tab">
   <!-- DIV FOR FIRST COLUMN -->
   <div class="left-column">
       <img class="image" src="http://upload.wikimedia.org/wikipedia/en/thumb/d/d0/Chrome_Logo.svg/1024px-Chrome_Logo.svg.png">
   </div>
   <!-- DIV FOR SECOND COLUMN -->
   <div class="right-column">
       <div class="class1">{{details.name}}</div>
       <div class="class2">{{details.location}}</div>
   </div>
</div>

这里是 css:

.global-tab{
    display: inline-block;
    position:relative;
    background-color:#EEE;
    width:90%;
    height: auto;
    padding:10px;
    vertical-align:middle;
    text-align:center;
}

.left-column{
    width:48%;
    display:inline-block;
    vertical-align:middle;
    background-color:#333;
    text-align:center;
}

.left-column img{
    display: inline-block;
    width:100%;
    height:auto;
}

.right-column{
    width:48%;
    display:inline-block;
    vertical-align:middle;
    background-color:#333;
    color:#FFF;
    text-align:left;
}

在这里，一个 JsFiddle 工作:

http://jsfiddle.net/p7akkxns/

问候。