우리 프로젝트 웹 사이트에서는 한 줄 또는 여러 줄이 텍스트 패러 글 래스 또는 텍스트 상자를 서로 연결하는 특별한 레이아웃을 만들려고합니다 (this draft과 같이).텍스트 단락을 서로 연결하는 수직선과 수평선 만들기
플러그인이나 내가 할 수있는 HTML/CSS 기술에 대해 아는 것이 있습니까?
수평 및 vertical lines (시간 및 div 클래스 = "verticalLine") 및 약 css positioning을 만드는 방법에 대한 설명은 지금까지 발견되었습니다.
그러나이 전략이 웹 사이트의 응답성에 문제를 일으킬 수 있는지 그리고 내가 바라 볼 방향이 없는지 궁금합니다.
나는 HTML/CSS 기술을 배우고 그 결과를 여기 게시 할 준비가되어 있습니다. 경험이있는 사람이 올바른 방향인지 알고 싶습니다.
고맙습니다.
CSS를 사용하여이 문제를 해결할 수 있습니다. pseudo elements. 응답 성이 뛰어나고 브라우저 지원은 상당히 좋지만 완료되지는 않습니다. 그것은 완전히 필요없는 기능의 종류, 그래서 정중하게 저하 될 것입니다 :
.box {
/* Default styles for our text boxes */
background:rgb(240, 240, 240);
border: 1px solid rgb(180, 180, 180);
padding:2em;
width:50%;
float:left;
position:relative;
/* Need this for the after elements */
}
.box:nth-child(even) {
/* Move every other box to the right */
float:right;
}
.box:after {
/* Creates an after element for our lines */
content:"";
height:50%;
border-top:2px solid grey;
border-right:2px solid grey;
width:25%;
position:absolute;
left:100%;
top:50%;
}
.box:nth-child(even):after {
/* Move the lines for the even boes to the other side */
left:auto;
right:100%;
border-right:none;
border-left:2px solid grey;
}<div class="box">
<h2>A title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="box">
<h2>A title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="box">
<h2>A title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
설명 내용을 시각적으로 설명해 주시겠습니까? (적어도 나에게) 흐름 차트처럼 들리는가? – jbutler483
질문에 jbutler483에게 감사드립니다. 위 질문에 초안을 추가했습니다. (여전히이 흥미로운 포럼을 사용하는 방법을 배우는 것) –
흐름도는 우리의 생각에 맞을 수있는 개념 인 것 같습니다, 감사합니다! 이것은 도움이 될 것입니다, 나는 그것을 지금 검사 할 것입니다 : http://stackoverflow.com/questions/15567278/how-to-make-a-flowchart-diagram-using-only-html-and-css –