Совместите три элемента: один из них содержит изображение, а два других - текст - PullRequest
Новая
       1

Совместите три элемента: один из них содержит изображение, а два других - текст

0 голосов
/ 25 октября 2011

Я пытаюсь выровнять три деления рядом. Центр div содержит ссылку с изображением, которая расширяет ссылки для редактирования текста. Проблема в том, что я не могу выровнять содержимое этих элементов по вертикали. Содержимое левого, правого и центрального div должно быть выровнено по центру по вертикали, как:

[справа]
[слева] [в центре] [справа]
[Право]

Это также может выглядеть примерно так:

[слева]
[слева] [справа]
[слева] [в центре] [справа]
[слева] [справа]
[Слева]

Но теперь это выглядит так:

[слева] [в центре] [справа]
[слева] [справа]
[Слева]

div edit-content лежит

Это код на данный момент: 

<div id="search-result" class="accordion">
            <div class="search-result-left">
                <p>CEPT, Conference Europ&eacute;enne des Adminidstra-</p>
                <p>tion Despostes et des T&eacute;l&eacute;communications</p>
            </div>
            <div class="search-result-right">
                <p>Evropsko združenje po&scaron;tnih in telekomunikaci-</p>
                <p>jskih organizacij</p>
            </div>
            <div class="search-result-center">
                <a href="#" class="acc"><img src="CSS/images/arrow_wr.gif"/></a>
            </div>
        <div class="edit-content">
            <p><a href="#">edit</a> - 
                <a href="#">comment</a> - 
                <a href="#">translate</a>
            </p>
        </div>
    </div>

и css: 

#all-search-results {
font-size: 14px;
color: #000000;
width: 730px;
margin: 0 auto;
line-height: 4px;
}
.search-result-left {
text-align: right;
float: left;
width: 335px;
}
.search-result-center {
text-align: center;
margin: 0 auto;
width: 60px;
}
.search-result-center img{
vertical-align: bottom;
}
.search-result-right {
text-align: left;
float: right;
width: 335px;
}
.edit-content{
color: #669900;
margin-top: 20px;
}
.edit-content a {
color: #669900;
}

Ответы [ 3 ]

0 голосов
/ 25 октября 2011

Полегче, тебе нужно немного подправить, но идея в том, что ты разбил его на три части

сверху средний Нижняя

затем вы можете переместить первый блок вправо в верхнем блоке, затем засуньте 3 блока в середину затем всплыть еще один справа внутри нижнего блока. (если мой код не работает, извините, я не проверял его, но идея есть)

Всегда лучше разбить вещи на то, что я называю «обертками». 

.Wrap{
    position: relative;
    height: 100px; width: auto;
    background: red;
}
.rightContent{
    float: right;
    height: 100px; width: 200px;
    background: blue;
}
#left{
    float: left; width: 200px; height: 100px; background: green;
}
#center{
    float: left; width: 200px; height: 100px; background: yellow;
}
#right{
    float: left; width: 200px; height: 100px; background: grey;
}

Html 

<div class="Wrap">
    <div class="rightContent">top right</div>
</div>

<div class="Wrap">
    <div id="left">mid left</div>
    <div id="center">mid center</div>
    <div id="right">mid right</div>
</div>

<div class="Wrap">
    <div class="rightContent">bottom right</div>
</div>
0 голосов
/ 25 октября 2011

Вот пример, на который вы можете сослаться 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Universal vertical center with CSS</title>
  <style>
    .greenBorder {border: 1px solid green;} /* just borders to see it */
  </style>
</head>

<body>
  <div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div class="greenBorder" style=" #position: relative; #top: -50%">
        any text<br>
        any height<br>
        any content, for example generated from DB<br>
        everything is vertically centered
      </div>
    </div>
  </div>
</body>
</html>
0 голосов
/ 25 октября 2011

Чтобы выровнять по центру содержимое div, я сделал это: 

.myDiv {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}
...