小编And*_*w L的帖子

我有一个关于CSS和HTML的问题.我目前正在构建一个文章模板,并且在一个方面有点难过.

我计划在一侧有一张照片,并在另一侧有一个相同高度的文本框.两者都被div标签包围,如下面的源代码所示.

<!--begin article-->        
<div id="article">
    <div id="article_header">           
        Title goes here     
    </div>      
    <div id="article_body">
        <!-- begin text. used for actual text of article-->
        <div id="text">
            Text Goes here              
        </div>          
        <!-- end text-->            
        <!-- begin article media. used for pictures -->
        <div id="article_media">
            <img src="source_goes_here" alt="This is an image!">
        </div>
    </div>
</div>

而CSS ......

#article{
    border:1px solid gold;
    margin-bottom:20px;
}    
#article_header{
    padding:5px;
    font-family:arial;
    font-size:36px;
    font-style:bold;
    color:white;
    background:url('orangegradiant.png');
}
#article_body{
    padding:5px;
    display:inline-block;
    width:auto;
}
#article_media{
    border: 1px solid pink;
    text-align:center;
    display:block;
    width:48%; …