Question

我有一些问题让SVG在我编写的布局中发挥得很好。以下是我一直在处理的工作表单元格布局的示例。第一个jsfiddle链接到工作示例。当我因某种原因用SVG替换左侧的文本时，右栏中的内容会被推下。知道为什么吗？

工作示例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上设置#!/usr/bin/zsh setopt c_bases typeset -i 16 num for num in $( seq $((0x10000000000000)) 1 $((0xffffffffffffff)) ); do echo "$num" fastboot oem unlock $num done属性，以便其他元素与其顶部对齐。 See updated fiddle

vertical-align

SVG将Padding添加到其他元素

1 个答案: