爲什麼下面的元素也移動到這個CSS的權利？

Question

下面的代碼顯示一些文字（#_EVENTEXCERPT）並顯示圖片（#_EVENTIMAGE）。我需要它，所以文本在左邊，圖像在右邊，所以它們彼此相鄰，就像這段代碼一樣。在這個下面有一個<a href="#_EVENTURL有很多css，這個鏈接變成了一個橙色的按鈕。目前，這個橙色按鈕正在與圖像一起移動。我不希望發生這種情況，我如何移動文本旁邊的圖像（與當前版本相同），但將<a href保留在左側？

從樣式表：

#eventexcandimage { 
width: 100%; 
} 

從PHP文件：

<div id="eventexcandimage"> 
      <span style="width: 50%; float: left; "> #_EVENTEXCERPT </span> 
#_EVENTIMAGE </div> 
     </li> 
      <li> 

     <span style="width:50%; " > <a href="#_EVENTURL" style=" -moz-box-shadow:inset 0px 1px 0px 0px #ed834e; 
       -webkit-box-shadow:inset 0px 1px 0px 0px #ed834e; 
       box-shadow:inset 0px 1px 0px 0px #ed834e; 
       background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ed834e), color-stop(1, #ed834e)); 
      background:-moz-linear-gradient(center top, #ed834e 5%, #ed834e 100%); 
       background-color:#ed834e; 
       -webkit-border-top-left-radius:0px; 
       -moz-border-radius-topleft:0px; 
       border-top-left-radius:0px; 
       -webkit-border-top-right-radius:0px; 
       -moz-border-radius-topright:0px; 
       border-top-right-radius:0px; 
       -webkit-border-bottom-right-radius:0px; 
       -moz-border-radius-bottomright:0px; 
       border-bottom-right-radius:0px; 
       -webkit-border-bottom-left-radius:0px; 
       -moz-border-radius-bottomleft:0px; 
       border-bottom-left-radius:0px; 
       text-indent:0px; 
       display:inline-block; 
       color:#fffffb; 
       font-family:Arial; 
       font-size:13px; 
       font-weight:bold; 
       font-style:normal; 
       height:35px; 
       line-height:35px; 
       width:111px; 
       text-decoration:none; 
       text-align:center; 
       text-shadow:1px 1px 0px #ed834e; 
      "> More Info/Book</a> </span> 

感謝您！

更新：是我希望按鈕位於文本/圖像下方的新行。它目前位於右側的圖像上方，我不知道爲什麼。

Answer 1

好吧，所以我把你的代碼，並希望它的工作方式，你想它（？）..也許。

也就在您的代碼下方，我重寫了它不是使用span或li而是div的，因爲它們比前兩個定位更好。這裏是鏈接到Fiddle以及作爲一個片段附加。

.btn { 
 
    -moz-box-shadow:inset 0px 1px 0px 0px #ed834e; 
 
       -webkit-box-shadow:inset 0px 1px 0px 0px #ed834e; 
 
       box-shadow:inset 0px 1px 0px 0px #ed834e; 
 
       background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ed834e), color-stop(1, #ed834e)); 
 
      background:-moz-linear-gradient(center top, #ed834e 5%, #ed834e 100%); 
 
       background-color:#ed834e; 
 
       -webkit-border-top-left-radius:0px; 
 
       -moz-border-radius-topleft:0px; 
 
       border-top-left-radius:0px; 
 
       -webkit-border-top-right-radius:0px; 
 
       -moz-border-radius-topright:0px; 
 
       border-top-right-radius:0px; 
 
       -webkit-border-bottom-right-radius:0px; 
 
       -moz-border-radius-bottomright:0px; 
 
       border-bottom-right-radius:0px; 
 
       -webkit-border-bottom-left-radius:0px; 
 
       -moz-border-radius-bottomleft:0px; 
 
       border-bottom-left-radius:0px; 
 
       text-indent:0px; 
 
       display:inline-block; 
 
       color:#fffffb; 
 
       font-family:Arial; 
 
       font-size:13px; 
 
       font-weight:bold; 
 
       font-style:normal; 
 
       height:35px; 
 
       line-height:35px; 
 
       width:111px; 
 
       text-decoration:none; 
 
       text-align:center; 
 
       text-shadow:1px 1px 0px #ed834e; 
 
} 
 

 
.event { 
 
    width: 100%; 
 
    margin-top: 25px; 
 
} 
 
.event_info { 
 
    width: 100%; 
 
    margin-bottom: 5px; 
 
} 
 
.event-text { 
 
    float: left; 
 
    width: 50%; 
 
} 
 
.event-text > h3 { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.event-img { 
 
    width: 50%; 
 
    float: left; 
 
} 
 
.img { 
 
    width: 100%; 
 
    height: 125px; 
 
    background: red; 
 
    display: block; 
 
}

<ul> 
 
    <li> 
 
     <div id="eventexcandimage"> 
 
      <span style="width: 50%; float: left; "> 
 
       #_EVENTEXCERPT 
 
      </span> 
 
      <div style="width: 50%; float: left;"> 
 
       <img class="img" src="" /> 
 
      </div> 
 
     </div> 
 
    </li> 
 
    <li style="clear: both;"> <span style="width:50%; "> <a href="#_EVENTURL" class="btn"> More Info/Book</a> </span> 
 
    </li> 
 
</ul> 
 

 
<div class="event"> 
 
    <div class="event-info"> 
 
     <div class="event-text"> 
 
      <h3>Event Title</h3> 
 
      <p>Text about your event</p> 
 
     </div> 
 
     <div class="event-img"> 
 
      <img class="img" src="" /> 
 
     </div> 
 
    </div> <!-- End event-info --> 
 
    <div style="clear: both;"> 
 
     <a href="#" class="btn">More Info/Book</a> 
 
    </div> 
 
</div>

Answer 2

我打算假設您提供的HTML已被切斷，因爲您的某些代碼沒有正確打開也沒有關閉，但這與您爲什麼看到自己的行爲無關。

span默認情況下顯示爲內聯（每行都自然流動）。你有一個跨度的按鈕，這意味着它試圖保持在它之前的事情相同的線上，這正在做你所看到的。所以，你可以做什麼？那麼，最快的解決方法是讓這個按鈕開始一個新的行。將按鈕上的顯示更改爲display:block。塊級元素佔據整個寬度，這將強制換行，因爲全寬度的東西不能與其他東西共享線條。