Question

如何设置div与背景图像和60％响应？我在网站顶部有navbar（div），边距为左边，边距为右边20％，响应在这里工作。在这个下面，是另一个div，左边距离和边距右边20％，背景图像，这里响应不起作用。

第二个问题：如果我有3个div与图像相同的行（1 img in 1 div），如果因为用户的分辨率不能位于1行，如何＆＃34;爆炸＆＃34;他们到2或3行？

Answer 1

看起来你刚刚学习，所以我想我会花一点时间给一点指导。首先，您应该了解Bootstrap是一个框架，可以让您实现您想要做的大部分工作。正如你所看到的，这些元素现在排成一行并且合理但我使用Bootstrap来实现这一点，而不是额外的css。此外，当屏幕折叠到移动设备时，您可以控制何时堆叠，因为您提到了您想要做的事情。此外，您将看到通过使用Bootstrap，需要更少的样式来实现所需的结果。

示例：http://jsbin.com/beruqorinu/edit?output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<header>
    <div class="container">
        <div class="row">
            <div id="header" class="col-sm-12">
                <h1>Tłumacz-litewskiego</h1>
            </div>
        </div>
        <div id="menu_container" class="row">
            <div class="col-sm-12">
                <nav>
                    <i class="fa fa-home"></i> Strona główna
                </nav>
            </div>
        </div>
        <div id="main_image" class="row">
            <div class="col-sm-8 bookbox">
                <h2>Tłumacz języka litewskiego</h2>
                <h4>mgr Živilė Wygońska</h4>
                <img class="img-responsive" src="http://tlumacz-litewskiego.eu/img/book.png">
            </div>
            <div class="col-sm-4 contact">
                <i class="fa fa-globe"></i> Polska, Podlaskie, Suwałki<br />
                <i class="fa fa-phone"></i> <b>Tel:</b> +48 515 231 589<br />
                <i class="fa fa-envelope-o"></i> <b>Email:</b> zivile.wygonska@gmail.com                
            </div>
        </div>  
    </div>  
</header>

<section id="info">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <h3><i class="fa fa-book"></i> O mnie</h3>
                <img src="http://tlumacz-litewskiego.eu/img/slide1.jpg" class="img-responsive">
                <p>Litewski to mój ojczysty język, większość życia mieszkałam na Litwie, gdzie studiowałam filologię litewską na Uniwersytecie Wileńskim.</p>
                <div class="collapse" id="cl1">
                    <p>Po przeprowadzce do Polski  na Uniwersytecie Warszawskim w Instytucie Języka I Kultury Polskiej Dla Cudzoziemców uzyskałam świadectwo znajomości języka polskiego. Ukończyłam pedagogikę na Uniwersytecie w Białymstoku.</p>
                    <p>Posiadam dziesięcioletnie doświadczenie jako tłumacz języka litewskiego. Przez te 10 lat, pracując z różnymi klientami, przetłumaczyłam setki stron o przeróżnej tematyce, m.in. turystyka, sprawozdania, statuty, przetargi, strony www, artykuły, etykiety, instrukcje obsługi, katalogi, foldery reklamowe, dokumentacje sądowe i wiele wiele innych.</p>
                </div>
                <a role="button" data-toggle="collapse" href="#cl1" aria-expanded="false" aria-controls="collapseExample1" id="element1" onclick="changeText(1)">Więcej...</a>
            </div>
            <div class="col-sm-4">
                <h3><i class="fa fa-newspaper-o"></i> Oferta</h3>
                <img src="http://tlumacz-litewskiego.eu/img/slide2.jpg" class="img-responsive">
                <p>Tłumaczenia ustne, pisemne, nauka języka litewskiego i korepetycje.</p>
                <div class="collapse" id="cl2">
                    <p><b>Tłumaczenia pisemne:</b> Tłumaczę teksty na język litewski oraz z języka litewskiego. Przetłumaczyłam m.in. kilkanaście katalogów, opowiadania, różne dokumenty, umowy, projekty i dokumenty związanie z realizacją projektów unijnych.</p>
                    <p><b>Tłumaczenia ustne:</b> tłumaczenie konferencyjne, symultaniczne (możliwość wynajmu sprzętu dla tłumaczeń symultanicznych), konsekutywne, towarzyszące, szeptane.</p>
                    <p><b>Nauka języka litewskiego i korepetycje:</b> prowadzę kursy nauki języka litewskiego na wszystkich poziomach dla klientów indywidualnych oraz instytucji.</p>
                    <p>Każde zlecenie jest traktowane indywidualnie, swoją pracę wykonuję rzetelnie i solidnie. Na życzenie klienta mogę przedstawić referencje zadowolonych klientów. </p>
                    <p>Gwarantowane bezpieczeństwo przekazywanych dokumentów oraz informacji. Każdy dokument jest traktowany jako poufny. Wykonane tłumaczenie jest archiwizowane przez okres 12 miesięcy. </p>
                    <p><b>Cena</b> tłumaczenia zależy od stopnia trudności tekstu, rodzaju tłumaczenia oraz terminu realizacji. Istnieje możliwość negocjacji cen przy większych zleceniach. </p>
                    1 strona obliczeniowa to 1600 znaków ze spacjami 12-punktową czcionką Times New Roman.</p>
                </div>
                <a role="button" data-toggle="collapse" href="#cl2" aria-expanded="false" aria-controls="collapseExample2" id="element2" onclick="changeText(2)">Więcej...</a>
            </div>
            <div class="col-sm-4">
                <h3><i class="fa fa-users"></i> Klienci</h3>
                <img src="http://tlumacz-litewskiego.eu/img/slide3.jpg" class="img-responsive">
                <p>Urząd Miasta Suwałki<br />
                Regionalny Ośrodek Kultury i Sztuki w Suwałkach<br />
                Suwalski Ośrodek Kultury...</p>
                <div class="collapse" id="cl3">
                    <p>Wigierski Park Narodowy<br />
                    Muzeum Wigier (Stary Folwark)<br />
                    Starostwo Powiatowe w Suwałkach<br />
                    Urząd Miasta w Giżycku<br />
                    Centrum Informacji Turystycznej w Giżycku, Wydawnictwo Mazurskie S.C.<br />
                    Podlaska Regionalna Organizacja Turystyczna<br />
                    oraz inni.</p>
                </div>
                <a role="button" data-toggle="collapse" href="#cl3" aria-expanded="false" aria-controls="collapseExample3" id="element3" onclick="changeText(3)">Więcej...</a>              
            </div>
        </div>
    </div>
</section>

<footer>
    <div class="container">
        <div id="copyright" class="row">
            <div class="col-sm-12">
                &copy; 2015 <a href="http://tlumacz-litewskiego.eu/">tlumacz-litewskiego.eu</a>
            </div>
        </div>
    </div>
</footer>

<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-65084817-1', 'auto');
    ga('send', 'pageview');
</script>
<script type="text/javascript">
    function changeText(idElement) {
        var element = document.getElementById('element' + idElement);
        if (idElement === 1 || idElement === 2 || idElement === 3) {
            if (element.innerHTML === 'Więcej...') element.innerHTML = 'Mniej...';
            else {
                element.innerHTML = 'Więcej...';
            }
        }
    }
</script>

</body>
</html>

CSS：

header h1 {
  margin-bottom: 20px;
  font-size: 40px;
}
nav {
  padding-top: 6px;
  padding-bottom: 6px;
  margin-bottom: 20px;
  font-size: 24px;
  border-top: 2px solid #C7C7C7;
  border-bottom: 2px solid #C7C7C7;
}
#main_image {
  background: url(http://tlumacz-litewskiego.eu/img/bg.jpg) no-repeat center center;
  background-size: cover;
}
.bookbox,
.contact {
   padding: 20px;
}
.bookbox img {
  max-width: 128px;
}
.contact {
  font-size: 16px;
  color: white;
}
.contact i {
  margin-right: 2px;
}
#info {
  text-align: center;
}
#copyright {
  margin-top: 20px;
  text-align: right;
}

我已经为你做了这个，希望它能作为一个例子，所以可以学习如何正确地解决问题。几条建议：

尽量避免使用内联css（直接在你的html中）
尽可能避免使用百分比。 Bootstrap是一个固定的像素框架。
访问http://getbootstrap.com并浏览文档，最重要的是“入门”页面（并查看示例）。

希望这有帮助！

背景图像响应宽度为60％

1 个答案: