DIV 안에 "열"만들기 : 배치하는 방법?

는 여기있다 : 섹션 "O 가야 fazemos"에서 http://baskra.com/teste/teste.html DIV 안에 "열"만들기 : 배치하는 방법?

, 나는 왼쪽 이미지를 표시합니다 텍스트와 오른쪽에 표시됩니다, 두 개의 "열"을 작성해야합니다. 이미지를 올바르게 배치하려면 어떻게해야합니까?

또한 다른 섹션에서는 세 개의 "열"을 만들어야합니다. 같은 규칙을 따르고 있습니까?

텍스트를 왼쪽에, 오른쪽에 이미지를 정렬하고 싶습니다.

고마워요.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<link rel="stylesheet" type="text/css" href="style.css" /> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>bask.ra</title> 

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic' rel='stylesheet' type='text/css'> 

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> 

<!-- COMECO DO NIVO SLIDER --> 
<link rel="stylesheet" href="themes/default/default.css" type="text/css" /> 
<link rel="stylesheet" href="nivo-slider.css" type="text/css" /> 
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script> 
<!-- FIM DO NIVO SLIDER --> 

<!-- COMECO DO MENU FIXO --> 
<script type="text/javascript"> 
jQuery("document").ready(function($){ 

    var nav = $('.menu-fundo'); 

    $(window).scroll(function() { 
     if ($(this).scrollTop() > 0) { 
      nav.addClass("f-menu"); 
     } else { 
      nav.removeClass("f-menu"); 
     } 
    }); 

}); 
</script> 
<!-- FIM DO MENU FIXO --> 

</head> 

<body> 

<div class="menu-fundo"> 
<div class="menu"> 

<script type="text/javascript"> 
$(window).load(function() { 
    $('#slider').nivoSlider(); 
}); 
</script> 

<div class="logo"> 

<img src="images/logo.png" /> 

</div> 

     <ul id="menutop"> 
       <li><a href="#contato">CONTATO</a></li> 
       <li><a href="#equipe">EQUIPE</a></li> 
       <li><a href="#quem">QUEM SOMOS</a></li> 
       <li><a href="#como">COMO FAZEMOS</a></li> 
       <li><a href="#que">O QUE FAZEMOS</a></li> 
     </ul> 
    </div> 
    </div> 

<script> 
$("#menutop a").click(function(){ 
    var menuid = $(this).attr("href"); 
    $("body").animate({scrollTop: $(menuid).offset().top - $('.menu').height() }, "slow"); 
    return false; 
}); 
</script> 

<div class="elementos"> 

<div id="slider" class="nivoSlider theme-default"> 
    <img src="images/slide1.png"/> 
    <img src="images/slide2.png"/> 
    <img src="images/slide3.png"/> 
</div> 



<div class="o-que-fazemos"> 
    <a id="que"></a> 
    <h1 class="o-que-fazemos-title">O QUE FAZEMOS?</h1> 
<h1 class="o-que-fazemos-subtitle">COMUNICAÇÃO + DESIGN</h1> 


<div class="o-que-fazemos-content-1"> 

<b>SUA MARCA VAI ALÉM.</b><br /> 
<br /> 

<b><i>Consolidar uma marca vai além.</i></b><br /> 
<br /> 

Além de um simples nome, razão ou 
definição, consolidar uma marca depende 
de uma experiência. E é a partir disto que 
as ideias surgem. Um novo conceito e uma 
nova definição de negócio.<br /> 

A <b>BASK.RA</b> nasceu para pensar, criar e 
gerenciar o posicionamento da sua 
empresa no mercado. 

</div> 


<div class="o-que-fazemos-content-2"> 

<img src="images/oqfazemos.png" /> 

</div> 



</div> 

<div class="como-fazemos"> 
    <a id="como"></a> 
    <h1 class="como-fazemos-title">COMO FAZEMOS?</h1> 

<p align="center"><img src="images/comofazemos.png" /></p> 

</div> 

<div class="quem-somos"> 
    <a id="quem"></a> 
    QUEM SOMOS?<br /> 
<br /> 

     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus. 
<br /> 
Vivamus mollis sed lectus nec malesuada. Maecenas luctus suscipit varius. Sed bibendum luctus ligula, fermentum venenatis arcu interdum eu. Praesent sollicitudin tortor arcu, eu varius nulla consectetur ac. Etiam vel interdum urna. Sed dignissim, quam eu consectetur dictum, felis nulla suscipit dolor, ut tincidunt lorem nisi ut nibh. Mauris aliquam laoreet leo, id bibendum arcu ornare vel. Vivamus ultricies fermentum porta. Praesent et mi tortor. Quisque varius mi ac nibh ultricies, id faucibus orci semper. Maecenas sit amet consectetur purus. Quisque vulputate in felis sit amet convallis. Sed pellentesque, lacus in auctor tincidunt, eros quam pellentesque magna, at rhoncus nulla mauris quis lorem. Maecenas condimentum massa ut bibendum sagittis. Etiam non fringilla felis. 
<br /> 
Curabitur rhoncus ut nibh eget interdum. Donec gravida, nunc gravida egestas tempus, leo urna vulputate ipsum, eget euismod leo enim et mi. Quisque non adipiscing nisi. Morbi a odio non lorem sagittis egestas vel et nunc. Vestibulum et turpis egestas neque blandit porttitor. Phasellus sem tellus, elementum id odio eget, scelerisque tincidunt lectus. In hac habitasse platea dictumst. Phasellus malesuada bibendum leo sit amet commodo. Vivamus vestibulum pulvinar nisl, eget scelerisque est dictum vel. Pellentesque posuere mattis ante, quis venenatis augue. Sed malesuada risus elit, vitae bibendum mi porta nec. Ut vitae purus felis. 
<br /> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus. 
</div> 

<div class="a-equipe"> 
    <a id="equipe"></a> 
    EQUIPE<br /> 
<br /> 

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus. 
<br /> 
Vivamus mollis sed lectus nec malesuada. Maecenas luctus suscipit varius. Sed bibendum luctus ligula, fermentum venenatis arcu interdum eu. Praesent sollicitudin tortor arcu, eu varius nulla consectetur ac. Etiam vel interdum urna. Sed dignissim, quam eu consectetur dictum, felis nulla suscipit dolor, ut tincidunt lorem nisi ut nibh. Mauris aliquam laoreet leo, id bibendum arcu ornare vel. Vivamus ultricies fermentum porta. Praesent et mi tortor. Quisque varius mi ac nibh ultricies, id faucibus orci semper. Maecenas sit amet consectetur purus. Quisque vulputate in felis sit amet convallis. Sed pellentesque, lacus in auctor tincidunt, eros quam pellentesque magna, at rhoncus nulla mauris quis lorem. Maecenas condimentum massa ut bibendum sagittis. Etiam non fringilla felis. 
<br /> 
Curabitur rhoncus ut nibh eget interdum. Donec gravida, nunc gravida egestas tempus, leo urna vulputate ipsum, eget euismod leo enim et mi. Quisque non adipiscing nisi. Morbi a odio non lorem sagittis egestas vel et nunc. Vestibulum et turpis egestas neque blandit porttitor. Phasellus sem tellus, elementum id odio eget, scelerisque tincidunt lectus. In hac habitasse platea dictumst. Phasellus malesuada bibendum leo sit amet commodo. Vivamus vestibulum pulvinar nisl, eget scelerisque est dictum vel. Pellentesque posuere mattis ante, quis venenatis augue. Sed malesuada risus elit, vitae bibendum mi porta nec. Ut vitae purus felis. 
<br /> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus. 
</div> 

<div class="o-contato"> 
    <a id="contato"></a> 
    CONTATO<br /> 
<br /> 

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus. 
<br /> 
Vivamus mollis sed lectus nec malesuada. Maecenas luctus suscipit varius. Sed bibendum luctus ligula, fermentum venenatis arcu interdum eu. Praesent sollicitudin tortor arcu, eu varius nulla consectetur ac. Etiam vel interdum urna. Sed dignissim, quam eu consectetur dictum, felis nulla suscipit dolor, ut tincidunt lorem nisi ut nibh. Mauris aliquam laoreet leo, id bibendum arcu ornare vel. Vivamus ultricies fermentum porta. Praesent et mi tortor. Quisque varius mi ac nibh ultricies, id faucibus orci semper. Maecenas sit amet consectetur purus. Quisque vulputate in felis sit amet convallis. Sed pellentesque, lacus in auctor tincidunt, eros quam pellentesque magna, at rhoncus nulla mauris quis lorem. Maecenas condimentum massa ut bibendum sagittis. Etiam non fringilla felis. 
<br /> 
Curabitur rhoncus ut nibh eget interdum. Donec gravida, nunc gravida egestas tempus, leo urna vulputate ipsum, eget euismod leo enim et mi. Quisque non adipiscing nisi. Morbi a odio non lorem sagittis egestas vel et nunc. Vestibulum et turpis egestas neque blandit porttitor. Phasellus sem tellus, elementum id odio eget, scelerisque tincidunt lectus. In hac habitasse platea dictumst. Phasellus malesuada bibendum leo sit amet commodo. Vivamus vestibulum pulvinar nisl, eget scelerisque est dictum vel. Pellentesque posuere mattis ante, quis venenatis augue. Sed malesuada risus elit, vitae bibendum mi porta nec. Ut vitae purus felis. 
<br /> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus. 
</div> 

</div> 
</body> 
</html>

CSS

@charset "utf-8"; 
/* CSS Document */ 


html,body { 
    height:100%;  
    margin:0; 
    padding:0; 
    border:0; 
    } 

div { 
    margin:0; 
    border:0; 
    } 

.login { 
    display: table-cell; 
} 

logo { 
    border:0; 
    z-index:9999; 
    float:left; 

    } 

.menu-fundo { 
    background: #fff repeat-x 0 0; 
    left: 0; 
    top: 0; 
    z-index: 9999; 
    position:fixed; 
    } 

.f-menu { 
    z-index: 9999; 
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 100%; 
    } /* isso vai fazer o menu ficar fixo no topo */ 

.menu { 
height: 100px; 
left: 0; 
top: 0; 
z-index: 9999; 
background: #fff repeat-x 0 0; 
position:fixed; width:100% 
} 

.menu ul { 
    list-style: none; 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size:17px; 
    font-weight:bold; 
    position: fixed; 
    top: 0; 
    right: 0; 
    display: table-cell; 
    vertical-align: middle; 
    width: 100%; 
    } 

.menu ul li { 
float: right; 
padding-right:30px; 
padding-top:0px; 
} 

.menu ul li:first-child { 
    padding-left: 0; 
    } 

.menu ul li a { 
    color:#000; 
    text-decoration:none; 
    border-top:3px solid #999; 
    } 

.menu ul li a:hover { 
    color: #6D6D6D; 
    border-top:3px solid #EA0000; 
    } 

.o-que-fazemos { 
    background-image: url('images/oqfazemosFUNDO.png'); 
    font-family: 'Source Sans Pro', sans-serif; 
    background-repeat: repeat-x repeat-y; 
    height:auto; 
    font-size:28px; 
    padding: 50px; 
    } 

.o-que-fazemos-title { 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size:80px; 
    text-align:center; 
    color:#ffc709; 
    font-weight:900; 
    letter-spacing: 2px; 
    } 

.o-que-fazemos-subtitle { 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size:80px; 
    text-align:center; 
    color:#FFF; 
    font-weight:900; 
    letter-spacing: 2px; 
    } 


.o-que-fazemos-content-1 { 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size:20px; 
    color:#FFF; 
    float:left; 
    margin-left:10%; 
    width: 30%; 
    } 


.o-que-fazemos-content-2 { 
    margin-right:10%; 
    width: 50%; 

    } 

.como-fazemos { 
    background-image: url('images/comofazemosFUNDO.png'); 
    font-family: 'Source Sans Pro', sans-serif; 
    background-repeat: repeat-x repeat-y; 
    height:auto; 
    padding: 50px; 
    } 

.como-fazemos-title { 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size:80px; 
    text-align:center; 
    color:#FFF; 
    font-weight:900; 
    letter-spacing: 2px; 
    } 

.quem-somos { 
    background-image: url('images/quemsomosFUNDO.png'); 
    font-family: 'Source Sans Pro', sans-serif; 
    background-repeat: repeat-x repeat-y; 
    height:auto; 
    font-size:28px; 
    padding: 50px; 
    } 

.a-equipe { 
    background-image: url('images/EQUIPE-FUNDO.png'); 
    font-family: 'Source Sans Pro', sans-serif; 
    background-repeat: repeat-x repeat-y; 
    height:auto; 
    font-size:28px; 
    padding: 50px; 
    } 

.o-contato { 
    background-image: url('images/contato-FUNDO.png'); 
    font-family: 'Source Sans Pro', sans-serif; 
    background-repeat: repeat-x repeat-y; 
    height:auto; 
    font-size:28px; 
    padding: 50px; 
    } 

.banner { 
    position: relative; 
    overflow: auto; 
    } 

.banner li { 
    list-style: none; 
    } 

.banner ul li { 
    float: left; 
    }

출처

2014-03-18 Giovanna Cóppola

@charset "utf-8";

/* CSS 문서 */

그것은 작동

html,body { 
    height:100%;  
    margin:0; 
    padding:0; 
    border:0; 
    } 

div { 
    margin:0; 
    border:0; 
    } 

.login { 
    display: table-cell; 
} 

logo { 
    border:0; 
    z-index:9999; 
    float:left; 

    } 

.menu-fundo { 
    background: #fff repeat-x 0 0; 
    left: 0; 
    top: 0; 
    z-index: 9999; 
    position:fixed; 
    } 

.f-menu { 
    z-index: 9999; 
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 100%; 
    } /* isso vai fazer o menu ficar fixo no topo */ 

.menu { 
height: 100px; 
left: 0; 
top: 0; 
z-index: 9999; 
background: #fff repeat-x 0 0; 
position:fixed; width:100% 
} 

.menu ul { 
    list-style: none; 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size:17px; 
    font-weight:bold; 
    position: fixed; 
    top: 0; 
    right: 0; 
    display: table-cell; 
    vertical-align: middle; 
    width: 100%; 
    } 

.menu ul li { 
float: right; 
padding-right:30px; 
padding-top:0px; 
} 

.menu ul li:first-child { 
    padding-left: 0; 
    } 

.menu ul li a { 
    color:#000; 
    text-decoration:none; 
    border-top:3px solid #999; 
    } 

.menu ul li a:hover { 
    color: #6D6D6D; 
    border-top:3px solid #EA0000; 
    } 
/*your grid*/ 
.row, .o-que-fazemos, .como-fazemos, .quem-somos { 
display: block; 
float: left; 
postiion: relative; 
overflowhidden; 
} 

.o-que-fazemos { 
    background-image: url('images/oqfazemosFUNDO.png'); 
    font-family: 'Source Sans Pro', sans-serif; 
    background-repeat: repeat-x repeat-y; 
    height:auto; 
    font-size:28px; 
    padding: 50px; 

} 
.o-que-fazemos-content-1, .o-que-fazemos-content-2 { 
display: block; 
float: left; 
} 

.o-que-fazemos-title { 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size:80px; 
    text-align:center; 
    color:#ffc709; 
    font-weight:900; 
    letter-spacing: 2px; 
    } 

.o-que-fazemos-subtitle { 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size:80px; 
    text-align:center; 
    color:#FFF; 
    font-weight:900; 
    letter-spacing: 2px; 
    } 
.o-que-fazemos-content-1 { 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size:20px; 
    color:#FFF; 
    text-align: left; 
    } 


.o-que-fazemos-content-2 { 

    text-align: right; 
    } 

.como-fazemos { 
    background-image: url('images/comofazemosFUNDO.png'); 
    font-family: 'Source Sans Pro', sans-serif; 
    background-repeat: repeat-x repeat-y; 
    height:auto; 
    padding: 50px; 
    } 

.como-fazemos-title { 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size:80px; 
    text-align:center; 
    color:#FFF; 
    font-weight:900; 
    letter-spacing: 2px; 
    } 

.quem-somos { 
    background-image: url('images/quemsomosFUNDO.png'); 
    font-family: 'Source Sans Pro', sans-serif; 
    background-repeat: repeat-x repeat-y; 
    height:auto; 
    font-size:28px; 
    padding: 50px; 
    } 

.a-equipe { 
    background-image: url('images/EQUIPE-FUNDO.png'); 
    font-family: 'Source Sans Pro', sans-serif; 
    background-repeat: repeat-x repeat-y; 
    height:auto; 
    font-size:28px; 
    padding: 50px; 
    } 

.o-contato { 
    background-image: url('images/contato-FUNDO.png'); 
    font-family: 'Source Sans Pro', sans-serif; 
    background-repeat: repeat-x repeat-y; 
    height:auto; 
    font-size:28px; 
    padding: 50px; 
    } 

.banner { 
    position: relative; 
    overflow: auto; 
    } 

.banner li { 
    list-style: none; 
    } 

.banner ul li { 
    float: left; 
    }

출처

2014-03-19 00:43:50 matthummel

나는 정말로 잘못된 것을하고있을 것입니다. 이것을 확인하십시오 : http://baskra.com/teste/teste.html. 나는 단지 헤더 네비게이션을 사용하고 DIVs 섹션에서 원하는만큼 많은 "컬럼"을 생성 할 수 있기를 원한다. =/ –

각 섹션에 대해 개폐 .row를 잊지 마십시오. – matthummel

이제 더 나아 보입니다! 한 가지 더 궁금한 점이 있습니다. "Como Fazemos"섹션에 지금 무슨 일이 일어 났습니까? –

당신은 div의 행동과 방식 CSS 플로트가 작동하는 방법에 조회 할 수 있습니다 : http://css-tricks.com/all-about-floats/

를 추가해보십시오 플로트 : 왼쪽;

.o-que-fazemos-content-2 { 
    margin-right:10%; 
    width: 50%; 
    float: left; 
    text-align: right; 
}

편집 : 두 번째 콘텐츠 즉 DIV에 그리고 조쉬는 당신이뿐만 아니라, 수레을 취소 즉 오버 플로우 추가해야 할 수 있습니다 지적 : .o 인 - 가야 - fazemos에 숨기거나 명확한 수정 프로그램을 사용

출처

2014-03-18 23:01:02

하지만, 어떤 이유로 그것을 "휴식"는 DIV. 실시간으로 확인하십시오. 왜 그런지 알아? 또한 콘텐츠 1과 콘텐츠 2를 어떻게 수직으로 정렬 할 수 있습니까? –

오버플로를 추가 할 수 있습니다. 숨김;에 : 문제가 해결되지 않으면

.o-que-fazemos { 
background-image: url('images/oqfazemosFUNDO.png'); 
font-family: 'Source Sans Pro', sans-serif; 
background-repeat: repeat-x repeat-y; 
height:auto; 
font-size:28px; 
padding: 50px; 
}

은, 오 - 가야 - fazemos 콘텐츠-1과 2 주위에 사업부를두고 시도하고 오버 플로우를 배치 : 숨겨진; 대신 거기 스타일.

출처

2014-03-18 23:03:03

둘 다 시도했지만 아무 일도 없었습니다. 어쨌든 고마워! –

섹션을 그리드로 만들어보다 쉽게 열을 정렬 할 수 있습니다. 예 :

.o-que-fazemos { 
**postion: relative;** 
**display: block;** 
**float: left;** 
overflow: hidden; *ie7 bug fix* 
} 

.o-que-fazemos-content-1, .o-que-fazemos-content-2 { 
display: block; 
float: left; 
} 

.o-que-fazemos-content-1 { 
text-align: left; 
} 

.o-que-fazemos-content-2 { 
text-align: right; 
}

다른 열에 대해서도 같은 방법을 따르십시오. 모든 것이 플로트를 유지해야하거나 높이를 유지하지 못합니다.

목록에는이 항목에 대한 훌륭한 기사가 있습니다. http://alistapart.com/article/css-positioning-101

출처

2014-03-18 23:32:23 matthummel

그것은 효과가있다. 그러나 무엇인가의 이유로 그것은 나의 다음 페이지 "Como fazemos"를 "붕괴시킨다". 링크를 클릭하면 작동하지 않으며 상단의 비트가 "잘립니다". –

각 섹션을 .row div로 닫으십시오. – matthummel

.o-que-fazemos, .row { ** postion : relative; ** ** display : block; ** ** float : left; ** 오버플로 : 숨김; * ie7 버그 수정 * – matthummel

DIV 안에 "열"만들기 : 배치하는 방법?

답변

관련 문제