下面是我使用的CSS类,我无法改变HTML结构中的任何内容。是否可以制作下面的容器 响应?
使用的CSS类
#container {
border: 1px solid #C0C0C0;
background-color: #F0F0F0;
border-radius: 10px;
width: 100%;
height: 65px;
margin-right: auto;
margin-left: auto;
}
.container-height {
height: 52px !important;
}
HTML代码
<div id="container" class="container-height">
<svg overflow="hidden" width="960" height="65"><defs></defs>
<rect fill="rgb(255, 255, 255)" fill-opacity="1" stroke="none" stroke-opacity="0" stroke-width="1"
stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" x="9.5" y="9" width="941" height="32" ry="0" rx="0" fill-rule="evenodd"></rect>
<g clip-path="url(#gfx_clip1)"><g><g><rect fill="rgb(105, 150, 45)" fill-opacity="1" stroke="rgb(247, 247, 247)" stroke-opacity="1" stroke-width="2"
stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" x="10.5" y="10" width="939.0000000000001" height="30" ry="0" rx="0" fill-rule="evenodd"
stroke-dasharray="none" dojoGfxStrokeStyle="solid"></rect></g><g><rect fill="rgb(0, 61, 140)" fill-opacity="1" stroke="rgb(247, 247, 247)" stroke-opacity="1"
stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" x="10.5" y="10" width="0" height="30" ry="0" rx="0" fill-rule="evenodd"
stroke-dasharray="none" dojoGfxStrokeStyle="solid"></rect></g></g></g><clipPath id="gfx_clip1"><rect x="10.5" y="10" width="939" height="30"></rect>
</clipPath><g><line fill="none" fill-opacity="0" stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="0" stroke-linecap="butt" stroke-linejoin="miter"
stroke-miterlimit="4" x1="10.5" y1="40" x2="949.5" y2="40" stroke-dasharray="none" dojoGfxStrokeStyle="solid"></line><line fill="none" fill-opacity="0"
stroke="rgb(102, 102, 102)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" x1="10.5" y1="40"
x2="10.5" y2="40" stroke-dasharray="none" dojoGfxStrokeStyle="solid"></line><line fill="none" fill-opacity="0" stroke="rgb(102, 102, 102)" stroke-opacity="1"
stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" x1="232.59082308420057" y1="40" x2="232.59082308420057" y2="40"
stroke-dasharray="none" dojoGfxStrokeStyle="solid"></line><line fill="none" fill-opacity="0" stroke="rgb(102, 102, 102)" stroke-opacity="1" stroke-width="1"
stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" x1="454.68164616840113" y1="40" x2="454.68164616840113" y2="40" stroke-dasharray="none"
dojoGfxStrokeStyle="solid"></line>
<line fill="none" fill-opacity="0" stroke="rgb(102, 102, 102)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter"
stroke-miterlimit="4" x1="676.7724692526017" y1="40" x2="676.7724692526017" y2="40" stroke-dasharray="none" dojoGfxStrokeStyle="solid"></line>
<line fill="none" fill-opacity="0" stroke="rgb(102, 102, 102)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter"
stroke-miterlimit="4" x1="898.8632923368023" y1="40" x2="898.8632923368023" y2="40" stroke-dasharray="none" dojoGfxStrokeStyle="solid"></line></g>
</svg>
</div>
下面是小提琴