html - 如何在未指定高度的情况下保持 SVG 线与父 div 相同的高度?
问题描述
所以我试图在两列之间放置一条 SVG 线,但该线没有占用父容器的高度。父容器没有指定高度,因为我希望它自动缩放到最高列。
示例: https ://jsfiddle.net/Lye0z5wx/4/
代码
html,
body {
width: 100%;
height: 100%;
}
div.container {
margin: 40px auto;
width: 70%;
display: flex;
align-items: center;
}
.column {
display: inline-block;
width: 40%;
}
svg {
display: block;
height: 100%;
width: 20%;
}
<body>
<div class="container">
<div class="column">
<h3>Content</h3>
<p>Easily change/switch/swap every placeholder inside every image on Sedna with the included Sketch files. You’ll have this template customised to suit your business in no time!</p>
<p>Nam vehicula malesuada lectus, interdum fringilla nibh. Duis aliquam vitae metus a pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum augue quis augue ornare, eget faucibus felis pharetra. Proin condimentum et leo
quis fringilla.</p>
</div>
<svg viewbox="0 0 100 100" preserveAspectRatio="none">
<line x1="50%" x2="50%" y1="0" y2="100%" style="stroke:rgb(235,235,235);stroke-width:1" />
Sorry, your browser does not support inline SVG.
</svg>
<div class="column">
<h3>Content</h3>
<p>Easily change/switch/swap every placeholder inside every image on Sedna with the included Sketch files. You’ll have this template customised to suit your business in no time!</p>
<p>Nam vehicula malesuada lectus, interdum fringilla nibh. Duis aliquam vitae metus a pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum augue quis augue ornare, eget faucibus felis pharetra. Proin condimentum et leo
quis fringilla.</p>
</div>
</div>
</body>
我一直在尝试几件事来完成这项工作,但 SVG 线在调整浏览器大小时会不断缩小。当我希望它包含父 div 的完整高度时。
谢谢您的帮助!
解决方案
您可以使用填充黑客:
.svgDiv
在这种情况下,您将 svg 包装在容器上。拥有.svgDiv
并使其与容器一样高height:0
。padding-top:100%
然后你可以给你的 svg 容器的宽度和高度。
html, body {
width: 100%;
height: 100%;
}
div.container {
margin: 40px auto;
width: 70%;
display: flex;
align-items: center;
outline:1px solid;
}
.column {
display: inline-block;
width: 40%;
}
.column h3{
color: #1c3653;
font-size: 20px;
margin: 0px;
}
.column p {
color: #1c3653;
font-size: 15px;
}
svg {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.svgDiv{
width: 10%;
height:0;
padding-top:100%;
position: relative;
}
<div class="container">
<div class="column">
<h3>Content</h3>
<p>Easily change/switch/swap every placeholder inside every image on Sedna with the included Sketch files. You’ll have this template customised to suit your business in no time!</p>
<p>Nam vehicula malesuada lectus, interdum fringilla nibh. Duis aliquam vitae metus a pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum augue quis augue ornare, eget faucibus felis pharetra. Proin condimentum et leo quis fringilla.</p>
</div>
<div class="svgDiv">
<svg viewbox="0 0 100 100" preserveAspectRatio="none">
<line x1="50%" x2="50%" y1="0" y2="100%" style="stroke:rgb(0,0,0);stroke-width:1" />
</svg>
</div>
<div class="column">
<h3>Content</h3>
<p>Easily change/switch/swap every placeholder inside every image on Sedna with the included Sketch files. You’ll have this template customised to suit your business in no time!</p>
<p>Nam vehicula malesuada lectus, interdum fringilla nibh. Duis aliquam vitae metus a pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum augue quis augue ornare, eget faucibus felis pharetra. Proin condimentum et leo quis fringilla.</p>
</div>
</div>
另一种方法是
.svgDiv
在这种情况下,您将 svg 包装在容器上您更改
align-items: center;
为align-items: stretch;
容器要将文本保持在您
align-self:center;
为列添加的中心。接下来你给你的 SVG 的宽度和高度
.svgDiv
(100%)
html, body {
width: 100%;
height: 100%;
}
div.container {
margin: 40px auto;
width: 70%;
display: flex;
align-items: stretch;
outline:1px solid;
}
.column {
display: inline-block;
width: 40%;
align-self:center;
}
.column h3{
color: #1c3653;
font-size: 20px;
margin: 0px;
}
.column p {
color: #1c3653;
font-size: 15px;
}
svg {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.svgDiv{
width: 10%;
position:relative;
}
<div class="container">
<div class="column">
<h3>Content</h3>
<p>Easily change/switch/swap every placeholder inside every image on Sedna with the included Sketch files. You’ll have this template customised to suit your business in no time!</p>
<p>Nam vehicula malesuada lectus, interdum fringilla nibh. Duis aliquam vitae metus a pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum augue quis augue ornare, eget faucibus felis pharetra. Proin condimentum et leo quis fringilla.</p>
</div>
<div class="svgDiv">
<svg viewbox="0 0 100 100" preserveAspectRatio="none">
<line x1="50%" x2="50%" y1="0" y2="100%" style="stroke:rgb(0,0,0);stroke-width:1" />
</svg>
</div>
<div class="column">
<h3>Content</h3>
<p>Easily change/switch/swap every placeholder inside every image on Sedna with the included Sketch files. You’ll have this template customised to suit your business in no time!</p>
<p>Nam vehicula malesuada lectus, interdum fringilla nibh. Duis aliquam vitae metus a pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum augue quis augue ornare, eget faucibus felis pharetra. Proin condimentum et leo quis fringilla.</p>
<p>Easily change/switch/swap every placeholder inside every image on Sedna with the included Sketch files. You’ll have this template customised to suit your business in no time!</p>
<p>Nam vehicula malesuada lectus, interdum fringilla nibh. Duis aliquam vitae metus a pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum augue quis augue ornare, eget faucibus felis pharetra. Proin condimentum et leo quis fringilla.</p>
</div>
</div>
我希望这有帮助。
推荐阅读
- flutter - Flutter 1.22.6 - url_launcher - 发送 HTML 电子邮件
- reactjs - 帆布已经在使用中。必须先销毁 ID 为“0”的图表,然后才能重新使用画布。聊天.JS
- sql-server - 如何在我的 SSIS 包中实施此特定操作?
- android - 关于Android工具链的“颤振医生”错误
- nuxt.js - 如何将光滑的轮播添加到 Nuxt
- python - Python unittest:写,读,比较不起作用
- angular - 如何替换打字稿中字符串之间的空格?
- view - 如何从 SQL 视图创建棱镜模型
- ios - 集合视图 indexPathForSelectedRow
- python - PPT中如何获取组合形状中的文字内容