SVG将填充添加到其他元素

Question

我有一些问题让SVG在我写的布局中发挥得很好。这里是我一直在研究的工作表格单元布局的例子。第一个jsfiddle链接到工作示例。当我出于某种原因使用SVG替换左侧的文本时，右侧列中的内容被压下。任何想法为什么？

working example

broken example

工作实施例HTML：

<div id="wrapper"> 
<div id="row"> 
    <div id="left-col"> 
     There are many variations of passages of Lorem Ipsum available 
    </div> 
    <div id="right_col"> 
     <aside><strong>ASIDE</strong></aside> 
     <div id="banner1">Banner 1</div> 
    </div> 
</div> 

破碎的实施例HTML：

<div id="wrapper"> 
<div id="row"> 
    <div id="left-col"> 
     <div id="divMapContainer" class="embed-responsive embed-responsive-1by1"> 
      <svg width="400" height="100"> 
       <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"></rect> 
      </svg> 
     </div> 
    </div> 
    <div id="right_col"> 
     <aside><strong>ASIDE</strong></aside> 
     <div id="banner1">Banner 1</div> 
    </div> 
</div> 

CSS：

body { 
    background-color: #333; 
    margin: 1em; 
} 

#wrapper { 
    width: 100%; 
    max-width: 46em; 
    margin: 0 auto; 
} 

@media (min-width: 48em) { 
    /* 768px */ 
    #wrapper { 
     display: table; 
    } 
    header { 
     display: table-header-group; 
    } 
    nav, 
    #banner2 { 
     display: block; 
    } 
    #row { 
     /* the rule below is redundant 
    thanks to SelenlT2 
*/ 
     /*display: table-cell;*/ 
    } 
    #left-col, 
    #right_col { 
     display: table-cell; 
    } 
    #left-col { 
     width: 50%; 
    } 
    footer { 
     display: table-footer-group; 
    } 
} 

#banner1 { 
    background-color: #9ed6f9; 
    height: 50%; 
} 

#left-col, 
#right_col { 
    background-color: #fff; 
} 

#right_col { 
    height: 100%; 
} 

aside { 
    background-color: #fbcdfa; 
    height: 50%; 
} 

#left-col, 
aside { 
    text-align: left; 
    padding: .5em; 
} 

nav, 
header, 
#banner1, 
#banner2, 
footer { 
    text-align: center; 
} 

.note { 
    color: #fff; 
    text-align: center; 
} 

Answer 1

这是因为SVG元素是行内默认。您可以在SVG上设置vertical-align属性，以便其他元素将对齐到顶部。 See updated fiddle。

svg { 
    vertical-align: top; 
}