CSS - float : right - div height is so tight

标签 css

我正在尝试创建我的网页，但我遇到了 float 问题。

这是我的 HTML 代码:

    <div id="RightBox"><div class="Title">Informacje</div><br>Autokoder.pl jest obecnie najbardziej innowacyjną i najszybciej rozwijającą się aplikacją służącą do obsługi aukcji Allegro.<br><br>Z naszego serwisu mogą korzystać zarówno sprzedający jak i kupujący użytkownicy Allegro. Zapewniamy dla naszych użytkowników szeroki wybór usług płatnych oraz darmowych.<br><br>Tylko u nas masz pewność, że Twoje kody zostaną bezproblemowo dostarczone do klienta. Dbamy także o dobro Twoje i kupującego informując błyskawicznie poprzez e-mail o braku dostępnych kodów.<br><br>Autokoder.pl jest obecnie najbardziej innowacyjną i najszybciej rozwijającą się aplikacją służącą do obsługi aukcji Allegro.<br><br>Z naszego serwisu mogą korzystać zarówno sprzedający jak i kupujący użytkownicy Allegro. Zapewniamy dla naszych użytkowników szeroki wybór usług płatnych oraz darmowych.<br><br>Tylko u nas masz pewność, że Twoje kody zostaną bezproblemowo dostarczone do klienta. Dbamy także o dobro Twoje i kupującego informując błyskawicznie poprzez e-mail o braku dostępnych kodów.</div>

    <div id="movie">
        <div class="Movie_Title"><a href="#">Wada ukryta / Inherent Vice (2014)</a></div><br>
        <div class="values">
            <div class="desc">
                <span id="text">W życiu prywatnego detektywa Doca Sportello niespodziewanie pojawia się jego była żona. Raczy go przy okazji opowieścią o swoim aktualnym chłopaku, deweloperze-miliarderze, w którym akurat jest zakochana, oraz snutej przez jego żonę i jej kochanka intrydze mającej na celu porwanie miliard... 
                <span class="more"><a href="#">[ Więcej ] »</a></span></span>
            </div>
            <div class="img">
                <img width="150px" border="0" class="value" height="200px" src="http://zalukaj.tv/image/22139.jpg">
            </div>
            <div style="clear: both;"></div>
        </div>
        <div>
            <div style="float: right;">
                TEKST 1
            </div>
            <div style="">
                TEKST2
            </div>
            <div style="clear: both;"></div>
        </div>
    </div>
    <div id="movie">
        <div class="Movie_Title"><a href="#">Wada ukryta / Inherent Vice (2014)</a></div><br>
        <div class="values">
            <div class="desc">
                <span id="text">W życiu prywatnego detektywa Doca Sportello niespodziewanie pojawia się jego była żona. Raczy go przy okazji opowieścią o swoim aktualnym chłopaku, deweloperze-miliarderze, w którym akurat jest zakochana, oraz snutej przez jego żonę i jej kochanka intrydze mającej na celu porwanie miliard... 
                <span class="more"><a href="#">[ Więcej ] »</a></span></span>
            </div>
            <div class="img">
                <img width="150px" border="0" class="value" height="200px" src="http://zalukaj.tv/image/22139.jpg">
            </div>
            <div style="clear: both;"></div>
        </div>
        <div>
            <div style="float: right;">
                TEKST2
            </div>
            <div style="">
                <div style="width: 140px; height: 40px; border-radius: 7px; border: 1px solid #000; background: #33A1DE; color: #000; line-height: 40px; text-align: center; font-weight: bold;">OGLĄDAJ FILM</div>
            </div>
            <div style="clear: both;"></div>
        </div>
    </div>

和 CSS 代码:

#RightBox {
font-size: 14px;
font-family: 'Century Gothic';
margin-top: 1%;
padding: 2%;
border: 1px solid #D1EAF8;
width: 30%;
background: #FCFDFE;
float: right;
}

#movie {
padding: 1%;
font-size: 14px;
font-family: 'Century Gothic';
width: 60%;
border: 1px solid grey;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-khtml-border-radius:8px;
border-radius:8px; 
margin-top: 4%;
}

#movie .Movie_Title a:hover
{
text-decoration: underline;
}

#movie .Movie_Title a
{
font-size: 20px;
text-decoration: none;
font-weight: bold;
color: #33A1DE;
}

#movie .values {
height: 200px;
margin-bottom: 2%;
}

#movie .values .img {
padding: 1px;
height: 200px;
width: 150px;
}

#movie .values .img .value {
border-radius: 10px;
-moz-border-radius: 10px;
border: 1px solid #000;
}

#movie .values .desc {
padding-right: 2px;
width: 72%;
height: 200px;
float: right;
display: table;
}

#movie .values .desc .more a:hover{
text-decoration: underline;
}


#movie .values .desc .more a{
font-weight: bold;
color: #000;
text-decoration:  none;
}

#movie .values .desc #text {
display: table-cell;
vertical-align: middle;
}

这里是 DEMO .

在左侧我们可以看到两个 div(查看 DEMO 并使用滚动)。第一个 div 太紧了，我不知道哪里出了问题。第二个 div 没问题。

谁能帮我解决这个问题？

谢谢。

最佳答案

我认为这段代码可以解决问题:

http://jsfiddle.net/3yja4tLj/ 

<div id="content" style="float:left">
<div id="RightBox"><div class="Title">Informacje</div><br>Autokoder.pl jest obecnie najbardziej innowacyjną i najszybciej rozwijającą się aplikacją służącą do obsługi aukcji Allegro.<br><br>Z naszego serwisu mogą korzystać zarówno sprzedający jak i kupujący użytkownicy Allegro. Zapewniamy dla naszych użytkowników szeroki wybór usług płatnych oraz darmowych.<br><br>Tylko u nas masz pewność, że Twoje kody zostaną bezproblemowo dostarczone do klienta. Dbamy także o dobro Twoje i kupującego informując błyskawicznie poprzez e-mail o braku dostępnych kodów.<br><br>Autokoder.pl jest obecnie najbardziej innowacyjną i najszybciej rozwijającą się aplikacją służącą do obsługi aukcji Allegro.<br><br>Z naszego serwisu mogą korzystać zarówno sprzedający jak i kupujący użytkownicy Allegro. Zapewniamy dla naszych użytkowników szeroki wybór usług płatnych oraz darmowych.<br><br>Tylko u nas masz pewność, że Twoje kody zostaną bezproblemowo dostarczone do klienta. Dbamy także o dobro Twoje i kupującego informując błyskawicznie poprzez e-mail o braku dostępnych kodów.</div>
<div id="movies" style="float: left; width: 60%">
        <div id="movie">
            <div class="Movie_Title"><a href="#">Wada ukryta / Inherent Vice (2014)</a></div><br>
            <div class="values">
                <div class="desc">
                    <span id="text">W życiu prywatnego detektywa Doca Sportello niespodziewanie pojawia się jego była żona. Raczy go przy okazji opowieścią o swoim aktualnym chłopaku, deweloperze-miliarderze, w którym akurat jest zakochana, oraz snutej przez jego żonę i jej kochanka intrydze mającej na celu porwanie miliard... 
                    <span class="more"><a href="#">[ Więcej ] »</a></span></span>
                </div>
                <div class="img">
                    <img width="150px" border="0" class="value" height="200px" src="http://zalukaj.tv/image/22139.jpg">
                </div>
                <div style="clear: both;"></div>
            </div>
            <div>
                <div style="float: right;">
                    <div style="width: 140px; height: 40px; border-radius: 7px; border: 1px solid #000; background: #33A1DE; color: #000; line-height: 40px; text-align: center; font-weight: bold;">OGLĄDAJ FILM</div>
                </div>
                <div style="">
                    <div style="width: 140px; height: 40px; border-radius: 7px; border: 1px solid #000; background: #33A1DE; color: #000; line-height: 40px; text-align: center; font-weight: bold;">OGLĄDAJ FILM</div>
                </div>
                <div style="clear: both;"></div>
            </div>
        </div>
        <div id="movie">
            <div class="Movie_Title"><a href="#">Wada ukryta / Inherent Vice (2014)</a></div><br>
            <div class="values">
                <div class="desc">
                    <span id="text">W życiu prywatnego detektywa Doca Sportello niespodziewanie pojawia się jego była żona. Raczy go przy okazji opowieścią o swoim aktualnym chłopaku, deweloperze-miliarderze, w którym akurat jest zakochana, oraz snutej przez jego żonę i jej kochanka intrydze mającej na celu porwanie miliard... 
                    <span class="more"><a href="#">[ Więcej ] »</a></span></span>
                </div>
                <div class="img">
                    <img width="150px" border="0" class="value" height="200px" src="http://zalukaj.tv/image/22139.jpg">
                </div>
                <div style="clear: both;"></div>
            </div>
            <div>
                <div style="float: right;">
                    <div style="width: 140px; height: 40px; border-radius: 7px; border: 1px solid #000; background: #33A1DE; color: #000; line-height: 40px; text-align: center; font-weight: bold;">OGLĄDAJ FILM</div>
                </div>
                <div style="">
                    <div style="width: 140px; height: 40px; border-radius: 7px; border: 1px solid #000; background: #33A1DE; color: #000; line-height: 40px; text-align: center; font-weight: bold;">OGLĄDAJ FILM</div>
                </div>
                <div style="clear: both;"></div>
            </div>
        </div>
  </div>
            </div>
<div style="clear: both;"></div>


#RightBox {
font-size: 14px;
font-family: 'Century Gothic';
margin-top: 1%;
padding: 2%;
border: 1px solid #D1EAF8;
width: 30%;
background: #FCFDFE;
float: right;
}

#movie {
padding: 1%;
font-size: 14px;
font-family: 'Century Gothic';
width: 100%;
border: 1px solid grey;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-khtml-border-radius:8px;
border-radius:8px; 
margin-top: 4%;
}


#movie .Movie_Title a:hover
{
text-decoration: underline;
}

#movie .Movie_Title a
{
font-size: 20px;
text-decoration: none;
font-weight: bold;
color: #33A1DE;
}

#movie .values {
height: 200px;
margin-bottom: 2%;
}

#movie .values .img {
padding: 1px;
height: 200px;
width: 150px;
}

#movie .values .img .value {
border-radius: 10px;
-moz-border-radius: 10px;
border: 1px solid #000;
}

#movie .values .desc {
padding-right: 2px;
width: 62%;
height: 200px;
float: right;
display: table;
}

#movie .values .desc .more a:hover{
text-decoration: underline;
}


#movie .values .desc .more a{
font-weight: bold;
color: #000;
text-decoration:  none;
}

#movie .values .desc #text {
display: table-cell;
vertical-align: middle;
}

关于CSS - float : right - div height is so tight，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29410667/

上一篇：javascript - 具有垂直和水平标题的响应表

下一篇：javascript - 在链接悬停时更改 Div 背景图像和内容？

相关文章：

css - 下拉菜单中的顶级菜单项

html - 在没有空间的情况下将图像居中对齐

javascript - 在 Canvas 上绘制旋转的 Path2D 对象

html - 模糊 css 背景图像封面中的背景部分

javascript - 浏览器调整大小后 AOS 动画无法正确触发

javascript - 如何缩小轮播幻灯片？

css - CSS 自定义属性可以保存另一个属性的值吗？

javascript - 创建心形进度加载器 | react 堆

javascript - 响应行不考虑其中 DIV 的高度

弹出式剑道网格的 Css 在 chrome 上损坏

©2024 IT工具网  联系我们