Попытка вертикальной линии

Я пытаюсь вставить вертикальную линию в свой код, который проходит по определенному пути текста.Попытка вертикальной линии

Мой полный код таким образом далеко:

<!DOCTYPE HTML> 
<html> 
    <header> 
     <title> This Website </title> 
     <link type="text/css" href="stylesheet.css" rel="stylesheet"/> 
    </header> 
<body> 
<div> 
    <section> 
     <h1> Test</h1> 
     </section> 

     <img src="thingvellir.jpg "class="vinstri" height="300" /> 

<p> 
<div class="vert">**Random text that I want my vertical line to follow.**</div> 
</p> 
    <img src="logo-thing.png" class="haegri" height="100" /> 
</div> 
</body> 
</html>

И это мой CSS файл:

body { 
    background-color:green; 
} 

div{ 
    height:800px; 
    width: 1300px; 
    border-color:black; 
    background-color:#e9b96e; 
    border-width:2px; 
    border-style: solid; 
    border-radius:10px; 
    margin: auto; 
    text-align: center; 
    } 

h1 { 
    margin:auto; 
    font-size: 35px; 
    } 

section 
{ 
    width: 400px; 
    height: 20px; 
    padding: 20px; 
    border: none; 
    margin: auto; 
    box-shadow:10px 10px 5px #888888; 
    background-color: white; 
    border-radius: 30px; 
    position:relative; 
    top: 10px; 
} 

p { 
    font-family:Verdana; 
    font-size:14px; 
} 

.vinstri { 
    float:left; 
    margin:3px; 
    border:solid black; 
} 

.vert { 
    border-left: thick solid #ff0000; 
}

Теперь этот последний атрибут, который должен сделать вертикальную линию, но то, что он делает вместо что он делает вертикальную линию вдоль поля «ВСЕГО ОРИГИНАЛА» (и по какой-то причине добавляет черную рамку вокруг, а также толкает текст вниз), как показано here.

Любые идеи о том, как исправить это? Благодарю.

источник

2013-12-04 user3066560

Я хочу, чтобы линия работала как левая граница текста. Я был в предположении, что это то, что я делаю? – user3066560

Ваше правило DIV распространяется на каждый DIV, как тот, который находится непосредственно внутри BODY, так и ваш DIV.vert. Итак, первое правило DIV в вашем CSS, применяя полную черную рамку, относится ко всем DIV в вашем коде. Я предполагаю, что вы хотите, чтобы это было применено к верхнему DIV вместо, а не ко всему.

Так что дайте этому верхнему DIV его собственный класс и обновите это первое правило, чтобы использовать имя класса.

В этом случае ваш DIV.vert поле, в котором вы хотите, чтобы левая красная линия также не подбирала дополнительные правила CSS.

ОБНОВЛЕНО HTML:

<!DOCTYPE HTML> 
<html> 
<header> 
    <title> This Website </title> 
    <link type="text/css" href="stylesheet.css" rel="stylesheet"/> 
</header> 
<body> 
<div class="main"> 
    <section> 
     <h1> Test</h1> 
    </section> 
    <div class="vert"> 
     <img src="thingvellir.jpg "class="vinstri" height="300" /> 
    </div> 
    <p> 
    <div class="vert">**Random text that I want my vertical line to follow.**</div> 
    </p> 
    <img src="logo-thing.png" class="haegri" height="100" /> 
</div> 
</body> 
</html>

И ваш CSS: тело { цвет фона: зеленый; }

div.main{ 
    height:800px; 
    width: 1300px; 
    border-color:black; 
    background-color:#e9b96e; 
    border-width:2px; 
    border-style: solid; 
    border-radius:10px; 
    margin: auto; 
    text-align: center; 
} 

h1 { 
    margin:auto; 
    font-size: 35px; 
} 

section 
{ 
    width: 400px; 
    height: 20px; 
    padding: 20px; 
    border: none; 
    margin: auto; 
    box-shadow:10px 10px 5px #888888; 
    background-color: white; 
    border-radius: 30px; 
    position:relative; 
    top: 10px; 
} 

p { 
    font-family:Verdana; 
    font-size:14px; 
} 

.vinstri { 
    float:left; 
    margin:3px; 
    border:solid black; 
} 

.vert { 
    border-left: thick solid #ff0000; 
}

источник

2013-12-04 16:06:42

Спасибо. Это почти все. Теперь это выглядит так: http://i.imgur.com/nEAqcrK.png Но я хочу, чтобы строка была справа от изображения, но слева от текста. Как я могу исправить эту деталь? Спасибо. – user3066560

Левая граница слева от всего, что внутри DIV. Если вы не хотите, чтобы граница была слева от изображения, изображение не может находиться внутри DIV. –

Я вижу. Благодарю вас, Джей. Есть ли у вас какие-либо идеи в отношении альтернативы, которая позволит мне получить желаемые результаты? – user3066560

Попытка вертикальной линии

ответ

Смежные вопросы