时间戳

首页 > 解决方案 > 左侧 div 上的 SVG 可调整大小，右侧 CSS 上的右上方 div

html - 左侧 div 上的 SVG 可调整大小，右侧 CSS 上的右上方 div

问题描述

我将创建一个包含两个 div 的容器：第一个 div（左侧）包含一个 svg 可调整大小的第二个 div（右侧）包含文本

我的问题是，当我调整浏览器大小时，第二个 div 与第一个 div 重叠......我想要获得的结果如下图所示：

在此处输入图像描述

在此处输入图像描述

另一个问题是，当我调整浏览器的大小时，div TEXT 不能位于 div svg 的下方或上方。

提前感谢您的回复

标签： htmlcsssvglayout

解决方案

在这种情况下，我会使用 flexbox。.svgdiv{flex:1 1 100%}。_ 这意味着 div 可以缩小、可以增长并占用所有可用空间。不能收缩，.textdiv{flex:0 0 160px;}不能增长，宽度始终为 160px。

#wrap{display:flex;border:1px solid;}
#wrap div{border:1px solid;margin:1em; padding:1em;}
.textdiv{flex:0 0 160px;}
.svgdiv{flex:1 1 100%}
<div id="wrap">
  <div class="svgdiv">
    <svg
	 viewBox="0 0 220.093 97.866" >
<path id="bone" d="M109.567,77.272c-15.662,0-31.325,0.067-46.985-0.061
	c-2.872-0.023-4.295,0.844-5.615,3.525c-7.676,15.599-26.02,21.57-41.052,13.61C0.698,86.29-4.548,67.584,4.39,52.351
	c1.605-2.736,1.305-4.475-0.195-7.043C-4.498,30.419,0.784,11.672,15.73,3.636C30.677-4.4,49.2,1.498,56.876,17.03
	c1.442,2.918,3.038,3.655,6.054,3.64c31.323-0.15,62.646-0.207,93.969-0.141c3.204,0.007,4.961-0.831,6.516-3.822
	c8.201-15.792,26.547-21.248,41.637-12.645c14.719,8.392,19.408,26.879,10.38,41.947c-1.495,2.496-0.962,4.025,0.269,6.151
	c7.455,12.87,5.242,28.401-5.264,37.779c-10.969,9.789-27.302,10.546-38.928,1.337c-3.159-2.503-5.958-5.954-7.749-9.553
	c-1.813-3.644-4.026-4.445-7.709-4.405c-15.493,0.166-30.988,0.07-46.482,0.07C109.567,77.351,109.567,77.312,109.567,77.272z
	 M210.979,30.262c-0.388-2.27-0.458-4.652-1.219-6.789c-3.137-8.809-10.701-14.133-19.688-14.133
	c-8.855,0-16.76,5.404-19.508,14.287c-1.52,4.911-4.051,6.243-8.982,6.213c-34.146-0.202-68.296-0.215-102.443,0.007
	c-5.255,0.034-8.032-1.192-9.749-6.575c-2.642-8.284-8.916-13.122-17.738-13.818c-9.017-0.712-16.017,3.065-20.03,11.147
	c-3.941,7.938-3.433,15.948,2.631,22.736c3.554,3.978,3.927,6.985,0.101,10.992c-5.417,5.674-6.238,12.77-3.966,19.986
	c2.742,8.713,10.345,14.087,19.051,14.176C38.68,88.587,46.653,83.31,49.531,74.3c1.542-4.828,3.981-6.295,8.965-6.266
	c34.813,0.211,69.629,0.168,104.444,0.035c3.993-0.015,5.971,1.309,7.189,5.127c2.754,8.629,8.559,14.291,17.82,15.174
	c9.145,0.871,16.372-2.891,20.527-11.167c4.212-8.389,3.154-16.499-3.271-23.497c-3.067-3.342-3.172-6.139-0.057-9.46
	C208.771,40.385,211.237,35.915,210.979,30.262z"/>
</svg>
  </div> 
  <div class="textdiv">This is some description</div>
</div>

推荐阅读