CSS 상대 위치 지정이 작동하지 않습니다.

어떤 이유로 Twitter 피드의 오른쪽에 이미지가 표시되지 않습니다. 나는 상대적으로 트위터 피드의 DIV 태그 안에 위치 시켰지만 아래에 남아있다. 여기에 라이브 링크입니다 : http://www.lymemd.org/indexmm6.php CSS 상대 위치 지정이 작동하지 않습니다.

내 CSS :

이

#twitterfeed { 
    position: relative; 
} 

#drshow { 
    position: relative; 
    left: 200px; 
}

내 HTML :

<div id="twitterfeed"> 
<a class="twitter-timeline" width="460" height="250" href="https://twitter.com/Lyme_MD" 
data-widget-id="453198382664667137">Tweets by @Lyme_MD</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s); js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 

<div id="drshow"> 
<img src="images/drshow.gif" alt="Diane Rehm Show Image" width="169" height="145"> 
</div> 

</div>

출처

2014-04-07 Eric

이 display:inline-block 추가 고칠 것 :

#drshow { position: relative; display:inline-block }

출처

2014-04-07 23:04:05 potashin

감사합니다. 왜 그것이 필요한지 아십니까? CSS를 처음 접했을 때 왜 "인라인"속성을 변경해야하는지 명확하지 않습니다. 무슨 뜻이에요? – Eric

에릭의 코멘트에 답하고 싶습니다. 블록 요소는 항상 새 줄에서 시작하여 전체 너비를 차지합니다 (https://www.w3schools.com/html/html_blocks.asp 참조). 인라인 블록 요소는 개행을 시작하지 않고 요소의 양쪽에 요소를 허용합니다. https://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block – bluesixty

왜 수레를 사용할 수 있습니까?

.twitter-timeline { 
    float: left; 
} 

#bannerArea { 
    clear: left; 
}

삭제하려는 곳 #bannerArea이지만, 그것은 시작인지 확실하지! 하나의 큰 이점은 방문자의 화면이 너무 좁아서 가로로 표시 할 수없는 경우 레이아웃이 조정된다는 것입니다. 또한 다른 주요 요소에 부동을 적용 할 수 있으므로 상대 위치 나 절대 위치를 염려 할 필요가 없습니다.

출처

2014-04-07 23:04:31

답변 해 주셔서 감사합니다. 나는 수레가 올바른 길이다라고 생각합니다. 오디오 플레이어를 이미지 아래에 배치하고 둘 다 트위터 피드의 오른쪽에 배치하는 방법은 무엇입니까? 모든 것을 위해 DIV를 만들어야합니까? 사전에 도와 주셔서 감사합니다 !! – Eric

예를 시작하려면 플레이어와 이미지를 하나의 div로 캡슐화하면됩니다 (이미'# drshow '로 설정되어 있음). 해당 div에서'text-align : center; '를 적용하고 HTML에서는 이미지 뒤에'
'을 추가합니다. 그러나 이미지 높이가 트위터 피드의 높이보다 높아지면 플레이어가 페이지 중앙에 위치하게되고 이미지 바로 아래에 있지 않습니다. –

도움 주셔서 감사합니다. 이제 다음 단계는 #BannerArea 전체를 두 개의 섹션으로 나눌 것입니다. – Eric

#twitterfeed가 position:relative 인 경우 #drshow는 position:absolute이어야합니다.

#drshow { 
    position: absolute; 
    top: 0px; 
    left: 30px; 
}

출처

2014-04-07 23:08:03 ramesh

CSS 상대 위치 지정이 작동하지 않습니다.

답변

관련 문제