Wie man die Höhe im CSS reagieren?

Habe ich eine html wie

<div class="container">
   <div class="content-1"></div>
   <div class="content-2"></div>
</div>

ich will, dass es funktioniert, wie wenn die Höhe der content-1 ist 480px, die content-2 Folgen wird die Höhe der content-1. Meine Breite ist einfach nur die Arbeit gut, aber meine Höhe nicht Folgen.

Wie es in css?

mein css-code ist

.container{
 clear: both;
}
.content-1{
 width:66.66%;
 position: static;
 background-image: url("../images/path1");
 background-repeat: no-repeat;
 background-size: cover;
}

.content-2{
 width:33.33%;
 position: static;
 background-image: url("../images/path2");
 background-repeat: no-repeat;
 background-size: cover;
}

..aaand container 100% Höhe? Ich meine.. was bedeutet "Folgen in der Höhe"?
können Sie Ihre css-code auch.
Ihre 2 innere div ist nicht geschlossen. Du sagst, dass Sie wollen content-2 haben die gleiche Höhe von content-1?
Was ist, wenn Sie verstellt die Höhe des Containers und machen nur die content-divs 50% Höhe? Nicht gerade eine Antwort, aber eine alternative.

InformationsquelleAutor natsumiyu | 2016-07-05

css html

-1

CSS:

	
.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
 
  margin-top: 10px;
 
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
 word-break: break-all;
}

HTML:

<div class="container flex-container">
   <div class="content-1 flex-item">orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
   <div class="content-2 flex-item">1</div>
</div>

Bitte versuchen Sie es zu vermeiden, nur dumping einen code als Antwort und versuchen zu erklären, was es tut und warum. Ihr code möglicherweise nicht offensichtlich für Leute, die nicht viel coding Erfahrung.
Lassen Sie uns nun einige weitere Eigenschaften. Betrachten Sie eine Liste mit 6 Elementen, die alle mit einem festen Dimensionen in eine Frage der ästhetik, sondern Sie könnten auto-Größe. Wir wollen, dass Sie gleichmäßig und schön verteilt auf der horizontalen Achse, so dass, wenn wir die Größe des Browsers, ist alles in Ordnung

InformationsquelleAutor Ramesh Vasoya

0

Können Sie CSS3 Flexbox in diesem Fall. container Klasse display:flex und alle Ihre child-Klasse wird auf gleicher Höhe.

CSS:
```
.container {
  display:flex; 
 
}

.content-1 {
  border:1px solid #000000;
  width:50%;
   height:480px;
  }

.content-2 {
  border:1px solid #ff0000;
  width:50%;
  }
```
HTML:
```
<div class="container">
   <div class="content-1">Content 1</div>
   <div class="content-2">Content 2</div>
</div>
```
- was bedeutet display:flex; tun?
- Es aktiviert eine flex-Kontext. Es ausrichten und verteilen: Abstand zwischen Elementen in einem container. Lesen Sie mehr über Flexbox-hier: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- wenn ich versuchte, mit flex meine div kleiner geworden.
- Können Sie Geige?
InformationsquelleAutor Rohit

Können Sie versuchen, diesen code:

.container {
    display: table;
}
.content-1, .content-2 {
    display: table-cell;
}

Ihnen fehlt ein Punkt vor content-2

InformationsquelleAutor vignesh

Versuchen Sie es mit der Tabelle anzeigen :

.container { 
    display: table;
    height: 480px;
 }
.content-1 {
    display:table-cell;
    float: none;
    width: 50%;
    height: 100%;
}
.content-2 {
    display: table-cell;
    float: none;
    width: 50%;
    height: 100%;
}

InformationsquelleAutor Pratik Deshmukh

0

Schließen Sie Ihre internal div tags.
```
<div class="container">
   <div class="content-1"></div>
   <div class="content-2"></div>
</div>
```
Können Sie die Höhe festlegen, die für Ihre parent div d.h. .container:480px wie folgt child element nehmen, die automatisch als 100%.
```
.container{
width:100%;
height:480px;
}

.container > .content-1{
width:100%;
height:100%;
}

.container > .content-2{
width:100%;
height:100%;
}
```
(oder) jQuery Verwenden um die Höhe der .content-1 und festgelegt, dass für .content-2
```
$(document).ready(function(){
var height = $(".container > .content-1").css("height");
$(".container > .content-2").css({
height : height,
background : "#f22"
 });
});
```
- Nicht ein guter Ansatz zu erreichen, reagieren Höhe mit Skript. Da gibt es viele Wege, dies zu erreichen mit CSS.
- Nun ja, aber dies ist eine option unter den. In der Erwägung, dass flex funktioniert perfekt in diese Art von Problem.
InformationsquelleAutor frnt

-3

müssen Sie fügen Sie weitere 1 Klasse zu, dass:

.height{
  height: 100px;  
}

<div class="container">
   <div class="content-1 height">
   <div class="content-2 height">
</div>

InformationsquelleAutor Chien Vu Hoang

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.