个人中心
gpt4 book ai didi

css - 在 DIV : how to place them? 中创建 "columns"

转载 作者：太空宇宙 更新时间：2023-11-03 23:42:33 24 4
gpt4 key购买 nike

这是:http://baskra.com/teste/teste.html

在“O que fazemos”部分，我需要创建两个“列”，左侧显示文本，右侧显示图像。我应该如何正确放置图像？

此外，在另一部分中，我将需要创建三个“列”。我遵守同样的规则吗？

请记住，我希望文本左对齐，图像右对齐。

非常感谢。

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;
    }

最佳答案 

   @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;
    }

关于css - 在 DIV : how to place them? 中创建 "columns"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22492771/

24 4 0
文章推荐： c# - 测试 ReactiveCommand 和 ReactiveObject ViewModel
文章推荐： c - 如何关闭 openGL 窗口
文章推荐： c# - SQL CE 4 和 EF 6 代码优先不支持默认值
文章推荐： c - 在 if 指令中读取 c 中的字符串
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com