Html CSS元素没有响应_Html_Css

Html CSS元素没有响应

html css

Html CSS元素没有响应,html,css,Html,Css,一些CSS元素没有响应。我希望最上面的两个盒子有自己的头部和红色背景。底部的两个盒子也一样。我将红色背景添加到两个不同的div中，因此红色背景应该有两个部分某些元素不会改变。我尝试添加不同的属性 <html> <head> <style> #content-area { overflow:auto; padding:50px 0; } #content

一些CSS元素没有响应。我希望最上面的两个盒子有自己的头部和红色背景。底部的两个盒子也一样。我将红色背景添加到两个不同的div中，因此红色背景应该有两个部分

某些元素不会改变。我尝试添加不同的属性

<html> 
<head>
    <style>
        #content-area {
            overflow:auto;
            padding:50px 0;
        }
        #content-area .side-column{
            float:left;
            width: 35%;
             padding: 2.5%;
            height:600px;
            margin-left:2%;
        }

        #content-area .widget-box {
        border-radius:3px;
        background:red;
        -webkit-box-shadow: -11px 10px 5px 0px rgba(0,0,0,0.05);
        -moz-box-shadow: -11px 10px 5px 0px rgba(0,0,0,0.05);
        box-shadow: -11px 10px 5px 0px rgba(0,0,0,0.05);
        }
        #content-area .widget-box .intro{
            margin-bottom:40px;
        }
        #content-area .widget-box .friends {
        float: left;
        clear: both;
        width: 443.44px;
        }
    </style>
</head>  
<section id="content-area">
    <div class="side-column .flex-container">
        <div class="widget-box photos">
                <div class="head">
                    <div class="widget-img">img</div>
                    <div class="widget-title">Title</div>
                </div>
                <div class="body">
                    <div style=" float:left; width:20%; height: 110px; background: url(https://r1.ilikewallpaper.net/ipad-wallpapers/download/20097/Watches-Machinery-Gear-Gold-ipad-wallpaper-ilikewallpaper_com.jpg) no-repeat center center ; 
                            -webkit-background-size: cover;
                            -moz-background-size: cover;
                            -o-background-size: cover;
                            background-size: cover;">
                        </div>
                    <div style=" float:left; width:20%; height: 110px; background: url(https://r1.ilikewallpaper.net/ipad-wallpapers/download/20097/Watches-Machinery-Gear-Gold-ipad-wallpaper-ilikewallpaper_com.jpg) no-repeat center center ; 
                        -webkit-background-size: cover;
                        -moz-background-size: cover;
                        -o-background-size: cover;
                        background-size: cover;">
                    </div>
                </div>
        </div>
        <div class="widget-box friends">
            <div class="head">
                <div class="widget-img">img</div>
                <div class="widget-title">Title</div>
            </div>
            <div class="body">
                <div style="  clear:both; float:left; width:20%; height: 110px; background: url(https://r1.ilikewallpaper.net/ipad-wallpapers/download/20097/Watches-Machinery-Gear-Gold-ipad-wallpaper-ilikewallpaper_com.jpg) no-repeat center center ; 
                        -webkit-background-size: cover;
                        -moz-background-size: cover;
                        -o-background-size: cover;
                        background-size: cover;">
                </div>
                <div style=" float:left; width:20%; height: 110px; background: url(https://r1.ilikewallpaper.net/ipad-wallpapers/download/20097/Watches-Machinery-Gear-Gold-ipad-wallpaper-ilikewallpaper_com.jpg) no-repeat center center ; 
                    -webkit-background-size: cover;
                    -moz-background-size: cover;
                    -o-background-size: cover;
                    background-size: cover;">
                </div>
            </div>
        </div>                        
    </div>  
</section>
</html>


#内容区{
溢出：自动；
填充：50px0；
}
#内容区。侧栏{
浮动：左；
宽度：35%；
填充：2.5%；
高度：600px；
左缘：2%；
}
#内容区小部件框{
边界半径：3px；
背景：红色；
-网络工具包盒阴影：-11px 10px 5px 0px rgba（0,0,0,0.05）；
-莫兹盒阴影：-11px 10px 5px 0px rgba（0,0,0,0.05）；
盒影：-11px 10px 5px 0px rgba（0,0,0,0.05）；
}
#内容区.widget框.intro{
边缘底部：40px；
}
#内容区。小部件框。朋友{
浮动：左；
明确：两者皆有；
宽度：443.44px；
}
img
标题
img
标题

#content area.widget box.friends

您可以尝试以下方法

<div class="flex-container">
    <div class="widget-box">
        <div class="head">
             head
        </div>
        <div class="body">
             body
        </div>
    </div>

    <div class="widget-box">
        <div class="head">
            head
        </div>
        <div class="body">
            body
        </div>
    </div>
</div>

<style>
.flex-container {
  width: 500px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.widget-box {
  width: 200px;
}
.head {
  background: red;
}    
</style>


头
身体
头
身体
.柔性容器{
宽度：500px；
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
}
.小部件盒{
宽度：200px；
}
.头{
背景：红色；
}

工作示例