2016-12-05 255 views
0

我正在嘗試實現以下內容;旋轉文本不是問題,但它下面的行是。它應該根據文本的長度而改變。意思是文本長度變化時線條會相應縮小或擴大。文本的頂部應保持在同一位置。垂直文本旁邊的垂直線

任何想法?

Example Image

編輯:

是我到目前爲止已經試過(忽略柔性):

<section class="slideshow"> 

    <div class="forsale"> 
     <a href="#">te koop</a> 
     <span></span> 
    </div> 

    <img src="./img/project_1.jpg" alt=""> 

</section> 


.forsale { 

position: relative; 
a { 
    position: absolute; 
    transform: rotate(-90deg) translate(0 ,100%; 
    transform-origin:0% 0%; 
    background-color: #eee; 
    display: block; 
    text-decoration: none; 
    color: black; 
    width: 385px; 
} 
span { 
    display: block; 
    width: 1px; 
    height: 100%; 
    background-color: black; 
    position: absolute; 
    left: 50%; 
    bottom: 0; 
} 

} 

我在哪裏現在 enter image description here

+0

一些標記和例子你試過什麼,什麼你想獲得幫助。 – BenM

+0

請檢查此鏈接:-http://stackoverflow.com/questions/8865458/how-to-vertically-center-text-with-css –

+0

@ Gerrit0我已經編輯了帖子。 –

回答

4

這是怎麼回事 - 我已經添加了註釋告訴你發生了什麼

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.slideshow { 
 
    position: relative; 
 
} 
 
.forsale { 
 
    width: 500px; /*this width = height of image */ 
 
    position: absolute; /* the following styles move this div to the middle of the slideshow div*/ 
 
    left: 50px; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    z-index: 1; 
 
} 
 
img { 
 
    margin-left: 100px; /* this is just making space for the text */ 
 
    display: block; /* removes any space below the image */ 
 
} 
 
.forsale a { 
 
    /* this rotates the anchor so it is dow the side of the image and moves it to the left of the forsale div */ 
 
    transform-origin: center; 
 
    transform: translate(-50%, 0) rotate(270deg); 
 
    display: block; 
 
    width: 100%; 
 
    width text-decoration: none; 
 
    color: black; 
 
} 
 
.half { 
 
    display:block; 
 
    width: 50%; 
 
    position: relative; 
 
    text-align: right; 
 
} 
 
.half:after { 
 
    /* this is the black line */ 
 
    content: ''; 
 
    display: block; 
 
    width: 100%; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 50%; 
 
    border-top: 1px solid #000000; 
 
    z-index: 1; 
 
} 
 
.line-hide { 
 
    /* this is to cover the black line under the text*/ 
 
    position: relative; 
 
    display: inline-block; 
 
    padding-left: 10px; /* however much space you want before the line */ 
 
    background-color: #ffffff; /* bacground colour of the page - hides the line */ 
 
    z-index: 2; 
 
}
<section class="slideshow"> 
 
    <div class="forsale"> 
 
    <a href="#"><span class="half"><span class="line-hide">te koop</span></span></a> 
 
    </div> 
 

 
    <img src="http://lorempixel.com/100/500/sports/1" alt=""> 
 
</section>

+0

Plussss從我:) – LGSon

+0

工程像魅力,但你會怎麼去關於這個,如果你不知道圖像的高度(即它與窗口的比例) –

+0

@JannesV不要以爲你可以做到這一點,因爲你需要知道的寬度知道你的文字可以多久是。唯一的其他選擇是使用JavaScript來完成,以便您可以即時計算圖像的高度 – Pete