Я стиль простой список статей, я только что узнал, что мой href на изображение меньше, чем фактическое изображение и его не так, как только его родитель. И я не знаю, как это исправить. Вот как это выглядит:
Мой HTML выглядит так:
<div id="article-container">
<ul>
<li><a href="#"><img src="images/foto.jpg" alt="Popis"></a>
<h2><a href="#">Název článku</a></h2>
<p><span><strong>28. 2. 2014 8:29</strong> od Dwandy</span><br>
Ahoj, jak se máš? Já úplně úžasně a úpe nejvíc. Závidíš, he? </p>
<p class="more"><a href="#" class="links">Přečíst</a><br>
<a href="#">4 reakce</a></p>
<hr>
</li>
<li><a href="#"><img src="images/foto.jpg" alt="Popis"></a>
<h2><a href="#">Název článku</a></h2>
<p><span><strong>28. 2. 2014 8:29</strong> od Dwandy</span><br>
Ahoj, jak se máš? Já úplně úžasně a úpe nejvíc. Závidíš, he? </p>
<p class="more"><a href="#" class="links">Přečíst</a><br>
<a href="#">4 reakce</a></p>
<hr>
</li>
<li><a href="#"><img src="images/foto.jpg" alt="Popis"></a>
<h2><a href="#">Název článku</a></h2>
<p><span><strong>28. 2. 2014 8:29</strong> od Dwandy</span><br>
Ahoj, jak se máš? Já úplně úžasně a úpe nejvíc. Závidíš, he? </p>
<p class="more"><a href="#" class="links">Přečíst</a><br>
<a href="#">4 reakce</a></p>
<hr>
</li>
</ul>
Мой CSS выглядит так:
#article-container{
width: 980px;
margin: 0 auto;
color:#4d4d4d;
font-size:90%;
height: 144px;
}
#article-container br, hr {
display:none;
}
#article-container ul {
width:960px;
height: 144px
overflow:hidden;
margin:0;
padding:15px 0;
}
#article-container li {
width:310px;
display:inline-block;
list-style:none;
padding:0;
margin:0px 0px 0px 8px;
}
#article-container a{
display:block;
}
#article-container img {
float:left;
margin: 0 10px 0 0
}
#article-container a img {
border:2px solid #999e8a;
}
#article-container a:hover img {
border-color:#000
}
#article-container h2 {
margin: 0;
padding: 0 0 10px 0;
font-size:110%;
font-weight:normal;
}
#article-container h2 a {
color:#4d4d4d
}
#article-container h2 a:hover {
color:#840000
}
#article-container p {
padding: 0 10px 0 0;
margin:0
}
#article-container p span {
display:block;
padding: 0 0 5px 0
}
#article-container p.more {
padding: 0px 0 0 0;
overflow:hidden
}
#article-container p.more a {
color:#2e79bc;
line-height: 27px;
}
#article-container p.more a:hover {
color:#840000
}
#article-container p.more a.links {
float:right;
padding: 5px 10px;
background:#2e79bc;
color:#fff;
margin-right:15px;
text-decoration:none;
border-radius:3px;
line-height: 18px;
}
#article-container p.more a.links:hover {
background:#000
}
Демо: FIDDLE ВСЕ ВЕБ-САЙТ ДЕМО
Может ли кто-нибудь помочь мне сделать такую же ширину ширины, что и изображение?
Поскольку <img/>
плавает, <a>
не обертывает его. Триггерная компоновка с overflow
или float
.
<edit>
О работе с элементами floatting: см. http://css-tricks.com/all-about-floats/ </edit>
http://fiddle.jshell.net/qB8V4/1/ float
похоже, что вам нужно здесь.
Затем, вы по- прежнему управлять нужду плавающой настройкой поведения взаимодействия overflow
элементов в стороне его, например: <p>
, <h2>
:
Это проблема с поплавком. просто перетащите: спрячьте свой элемент css # article-container a.