所以我现在正在设计一个网站(在
HTML和CSS上相当不错),但我事先在Photoshop上做了一个设计,这样我就可以直接编写代码并使网站成为我想要的.好吧,我有一个问题.尽管使用了内联块,我在一个更大的容器DIV内部有两个DIV元素,它们不会并排排列.这是css代码：
.contentContainer {
display: block;
width: 700px;
height: 250px;
margin: 20px auto;
}
.topContainer {
height: 230px;
padding: 10px;
background-color: white;
}
.topThumbnail {
display: inline-block;
width: 370px;
height: 230px;
}
.topThumbnail img {
width: 370px;
height: 230px;
}
.topInfo {
display: inline-block;
margin-left: 10px;
width: 300px;
height: 230px;
}
.topInfo p {
width: 300px;
height: 230px;
background-color: pink;
}
contentContainer是持有我的topContent和topThumbnail的最高DIV,所以我想我会把它扔进提供的代码中.
和HTML代码：
<div class="topContainer">
<div class="topThumbnail">
<img src="YT.png" />
</div>
<div class="topInfo">
<p>Testing the information area of the top container or something along those lines</p>
</div>
</div>
无法发布图片来解释问题..需要10个声誉..会让人难以描述.
在设计中,缩略图和信息的两个容器应该是并排的并且在顶部对齐.缩略图应该位于topContainer的左侧,而信息应该位于缩略图的右侧,边距为10.由于某种原因,信息不会转到缩略图的右侧,而是去在它下面.我已将ALREADY设置为0以修复默认保证金问题.
