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>标记，其中属性＆＃ 34; src＆＃34;去）

并且，尽量不要使用带有那种十进制数的宽度和填充。这可能会在以后引起问题。

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

在这里，我将留下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/

问候。

Answer 2

在}和.class1的CSS中移除额外关闭的大括号.class2并尝试。

试图在CSS中组成div

2 个答案: