이미지가있는 원 사이에 선을 배치하는 방법은 무엇입니까?

초보자 인 HTML과 CSS로 코드 .psd 레이아웃을 사용하기로 결정했습니다. 불행하게도, 내가 레이아웃의 그 부분에 붙어 :이미지가있는 원 사이에 선을 배치하는 방법은 무엇입니까?

는 말은 그 이미지와 원 사이의 라인. 여기 내 코드는입니다 :

html { 
 
    font-size: 62.5%; 
 
} 
 

 
body { 
 
    width: 1400px; 
 
    font-family: "Roboto Slab", serif; 
 
} 
 

 
section { 
 
    padding-right: 230px; 
 
    padding-left: 230px; 
 
} 
 

 
.culture { 
 
    padding-top: 100px; 
 
    padding-bottom: 100px; 
 
    background-color: #f9f9f9; 
 
    overflow: auto; 
 
} 
 

 
h2 { 
 
    font-family: "Montserrat", sans-serif; 
 
    font-size: 4rem; 
 
    color: #222; 
 
    text-align: center; 
 
} 
 

 
.culture p { 
 
    color: #777; 
 
    text-align: center; 
 
} 
 

 
.culture > p { 
 
    padding-top: 20px; 
 
    padding-bottom: 89px; 
 
    font-size: 2rem; 
 
} 
 

 
.value { 
 
    float: left; 
 
    padding-right: 56px; 
 
} 
 

 
.line { 
 
    width: 170px; 
 
    height: 2px; 
 
    background-color: #777; 
 
} 
 

 
.value_img { 
 
    width: 91px; 
 
    height: 91px; 
 
    margin: 0 auto 25px; 
 
    border: 2px #777 solid; 
 
    border-radius: 100%; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
} 
 

 
.balance { 
 
    background-image: url("http://d-k.aq.pl/note.png"); 
 
} 
 

 
.quality { 
 
    background-image: url("http://d-k.aq.pl/chart.png"); 
 
} 
 

 
.excellence { 
 
    background-image: url("http://d-k.aq.pl/star.png"); 
 
} 
 

 
h3 { 
 
    font-family: "Montserrat", sans-serif; 
 
    font-size: 1.8rem; 
 
    color: #222; 
 
    text-align: center; 
 
} 
 

 
.value p { 
 
    padding-top: 20px; 
 
    font-size: 1.4rem; 
 
}

<head> 
 
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700" rel="stylesheet" type="text/css"> 
 
</head> 
 
<section class="culture"> 
 
    <h2> 
 
    CULTURE &amp; VALUES 
 
    </h2> 
 
    <p> 
 
    Phasellus gravida ex at odio elementum. 
 
    </p> 
 
    <div class="value"> 
 
    <div class="value_img balance"> 
 
         
 
    </div> 
 
    <h3> 
 
     WORK-LIFE BALANCE 
 
    </h3> 
 
    <p> 
 
     Suspendisse ut odio vel felis pulvinar<br> 
 
     sodales. Nunc ultricies nibh non velit<br> 
 
     feugiat cursus. Phasellus scelerisque 
 
    </p> 
 
    </div> 
 
    <div class="line"> 
 
        
 
    </div> 
 
    <div class="value"> 
 
    <div class="value_img quality"> 
 
        
 
    </div> 
 
    <h3> 
 
     QUALITY OVER QUANTITY 
 
    </h3> 
 
    <p> 
 
     Suspendisse ut odio vel felis pulvinar<br> 
 
     sodales. Nunc ultricies nibh non velit<br> 
 
     feugiat cursus. Phasellus scelerisque. 
 
    </p> 
 
    </div> 
 
    <div class="line"> 
 
        
 
    </div> 
 
    <div class="value"> 
 
    <div class="value_img excellence"> 
 
         
 
    </div> 
 
    <h3> 
 
     DELIVER EXCELLENCE 
 
    </h3> 
 
    <p> 
 
     Suspendisse ut odio vel felis pulvinar<br> 
 
     sodales. Nunc ultricies nibh non velit<br> 
 
     feugiat cursus. Phasellus scelerisque. 
 
    </p> 
 
    </div> 
 
</section>

나는 그들을 위해 절대 위치를 사용해야합니까?

출처

2016-08-21 Damien

IMO, 당신은 절대적으로 필요한 경우가 아니면 절대 위치를 피해야한다. (말장난 의도 없음) – qxz

스택 오버플로에 오신 것을 환영합니다! 앱솔루트 포지셔닝 (Absolute positioning)은 ** 매우 ** 웹 페이지를 레이아웃하는 빈약 한 방법입니다. 매우 융통성이 없으며 훨씬 더 반응이 좋은 옵션이 있습니다. 체크 아웃 [** LearnLayout.com **] (http://learnlayout.com/) –

당신은 의사 요소와 부정적인 마진 사용할 수 있습니다 : 당신이 대신 float를 레이아웃을 설정하는 display:flex 한 번 봐 걸릴 수 있습니다

.value + .value .value_img:before { 
    content: ''; 
    display: block; 
    margin: 50px 0 0 -190px; 
    width: 170px; 
    height: 2px; 
    background-color: #777; 
} 

.line {/* deleted from html */}

을 margin도 대신 사용할 수 있습니다 고정 평균 padding 값

html { 
 
    font-size: 62.5%; 
 
} 
 
body { 
 
    width: 940px;/* padding of section removed */ 
 
    font-family: "Roboto Slab", serif; 
 
    margin: auto; 
 
} 
 
section { 
 
    /* ?? 
 
    padding-right: 230px; 
 
    padding-left: 230px; 
 
    */ 
 
} 
 
.culture { 
 
    padding-top: 100px; 
 
    padding-bottom: 100px; 
 
    background-color: #f9f9f9; 
 
    overflow: auto; 
 
    display: flex;/* set things easily and will allow vertical and or horizontal alignements */ 
 
    flex-wrap: wrap;/* we need this here */ 
 
} 
 
h2 { 
 
    font-family: "Montserrat", sans-serif; 
 
    font-size: 4rem; 
 
    color: #222; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 
.culture p { 
 
    color: #777; 
 
    text-align: center; 
 
} 
 
.culture > p { 
 
    padding-top: 20px; 
 
    padding-bottom: 89px; 
 
    font-size: 2rem; 
 
    width: 100%; 
 
} 
 
.value { 
 
    padding: 0 28px;/* around equally , helps to center things visually */ 
 
} 
 
/* draw the lines here, .value + .value .. does not select first */ 
 
.value + .value .value_img:before { 
 
    content: ''; 
 
    display: block; 
 
    margin: 50px 0 0 -190px; 
 
    width: 170px; 
 
    height: 2px; 
 
    background-color: #777; 
 
} 
 
.line {/* no need no more */} 
 
.value_img { 
 
    width: 91px; 
 
    height: 91px; 
 
    margin: 0 auto 25px; 
 
    border: 2px #777 solid; 
 
    border-radius: 100%; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
} 
 
.balance { 
 
    background-image: url("http://d-k.aq.pl/note.png"); 
 
} 
 
.quality { 
 
    background-image: url("http://d-k.aq.pl/chart.png"); 
 
} 
 
.excellence { 
 
    background-image: url("http://d-k.aq.pl/star.png"); 
 
} 
 
h3 { 
 
    font-family: "Montserrat", sans-serif; 
 
    font-size: 1.8rem; 
 
    color: #222; 
 
    text-align: center; 
 
} 
 
.value p { 
 
    padding-top: 20px; 
 
    font-size: 1.4rem; 
 
}

<head> 
 
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700" rel="stylesheet" type="text/css"> 
 
</head> 
 
<section class="culture"> 
 
    <h2> 
 
    CULTURE &amp; VALUES 
 
    </h2> 
 
    <p> 
 
    Phasellus gravida ex at odio elementum. 
 
    </p> 
 
    <div class="value"> 
 
    <div class="value_img balance"> 
 

 
    </div> 
 
    <h3> 
 
     WORK-LIFE BALANCE 
 
    </h3> 
 
    <p> 
 
     Suspendisse ut odio vel felis pulvinar 
 
     <br>sodales. Nunc ultricies nibh non velit 
 
     <br>feugiat cursus. Phasellus scelerisque 
 
    </p> 
 
    </div> 
 

 
    <div class="value"> 
 
    <div class="value_img quality"> 
 

 
    </div> 
 
    <h3> 
 
     QUALITY OVER QUANTITY 
 
    </h3> 
 
    <p> 
 
     Suspendisse ut odio vel felis pulvinar 
 
     <br>sodales. Nunc ultricies nibh non velit 
 
     <br>feugiat cursus. Phasellus scelerisque. 
 
    </p> 
 
    </div> 
 

 
    <div class="value"> 
 
    <div class="value_img excellence"> 
 

 
    </div> 
 
    <h3> 
 
     DELIVER EXCELLENCE 
 
    </h3> 
 
    <p> 
 
     Suspendisse ut odio vel felis pulvinar 
 
     <br>sodales. Nunc ultricies nibh non velit 
 
     <br>feugiat cursus. Phasellus scelerisque. 
 
    </p> 
 
    </div> 
 
</section>

출처

2016-08-21 22:37:01

padding의 .wrapper을 사용하여 모든 항목의 너비를 설정하십시오.

.wrapper { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-around; 
 
    padding: 0 10%; 
 
    } 
 

 
.item { 
 
    border: 3px solid #777; 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 50%; 
 
    } 
 
.line { 
 
    border: 1px solid #777; 
 
    margin: 0 2%; 
 
    flex: 1 0; 
 
    }

<div class="wrapper"> 
 
    <div class="item"></div> 
 
    <div class="line"></div> 
 
    <div class="item"></div> 
 
    <div class="line"></div> 
 
    <div class="item"></div> 
 
</div>

출처

2016-08-21 21:51:30

이미지가있는 원 사이에 선을 배치하는 방법은 무엇입니까?

답변

관련 문제