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

我将假设您提供的HTML已被切断，因为您的某些代码未正确打开或关闭，但这与您为什么看到您的行为无关是

默认情况下，

span以内联方式显示（一切都自然地在一条线上流动）。你有一个跨度的按钮，这意味着它试图与之前的东西保持同一条线，这就是你正在做的事情。所以，你可以做什么？好吧，最快的解决办法就是让这个按钮在新线上开始。将按钮上的显示更改为display:block。块级元素占据整个宽度，这将强制换行，因为全宽度的东西不能与其他东西共享线。

Answer 2

好的，所以我接受了你的代码并希望它按你想要的方式工作（？）..也许。

同样在你的代码下方，我重写了它不是使用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>

为什么下面的元素也会用这个css向右移动？

2 个答案: