1
div 컨테이너의 경계선을 실행하려고하는데 약간 혼란스러워집니다.SVG 라인을 가변 높이 컨테이너의 맨 아래에 고정하는 방법은 무엇입니까?
<div style="position: absolute; bottom: 0px;">hello world</div>
을하지만 일을 얻을 수있는 유일한 SVG 코드가 잘못된 것 같습니다 : 나는 가장자리를 따라 사업부를 배치 한 경우
, 내가 사용하는 것이
#BorderContainer805 {
\t position: absolute;
\t top: 0px;
\t left: 0px;
\t width: 99%;
\t height: 150px;
\t display: inline-block;
\t border-radius: 0;
\t border-width: 1px;
\t border-color: #696969;
\t border-style: solid;
}
#HorizontalLine1118 {
\t position: absolute;
\t stroke: rgba(154,154,154,1);
\t shape-rendering: crispEdges;
}
#HGroup811 {
\t position: absolute;
\t top: 43px;
\t right: 20px;
\t min-width: 20px;
\t min-height: 20px;
\t overflow: visible;
\t text-align: left;
\t font-family: Arial;
\t font-size: 12px;
}
#Hyperlink812 {
\t position: relative;
\t display: inline-block;
\t vertical-align: middle;
\t margin-top: -0.2em;
}
#Image817 {
\t position: absolute;
\t display: table;
\t top: 50%;
\t transform: translateY(-50%);
\t -webkit-transform: translateY(-50%);
\t -ms-transform: translateY(-50%);
\t left: 15px;
}<div id="BorderContainer805">
\t <svg style="position: absolute; width: 100%; height: 100%;"><line id="HorizontalLine1118" x1="0" x2="100%" y1="100" y2="100"></line></svg>
\t <img id="Image817" height="60" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/se/se-icon.png?v=93426798a1d4">
\t <div id="HGroup811">
\t \t <a id="Hyperlink812">Home</a>
\t \t <a id="Hyperlink813">Services</a>
\t \t <a id="Hyperlink814">Products</a>
\t \t <a id="Hyperlink815">About Us</a>
\t \t <a id="Hyperlink816">Contact Us</a>
\t \t <span style='display: inline-block; height: 100%; width: 0; vertical-align: middle;'></span>
\t </div>
</div >미리 감사드립니다.
를 사용합니다. div의 'border-bottom'CSS가 더 효율적이지 않습니까? –
간단한 경우에는 테두리 아래쪽을 사용하지만 div에 줄을 추가 할 수있는 도구로 작업하고 있습니다. 그리고 어떤 경우는 국경에 의해 해결 될 수 없습니다. 예를 들어 너비가 100이고 다양한 높이 (예 : 기둥 형 차트)가있는 아래쪽에 5 개의 선이 필요하다고 가정 해 봅시다. –
코드가 잘못된 것처럼 보이는 이유는 무엇입니까? 내가 말할 수있는 한 그것은 작동하는 것 같다. –