Webdesign-Forum

Normale Version: DIVs werden unterschiedlich dargestellt
Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
Hallo ihr Experten. Ich habe 3 Divs nebeneinander, aber wenn sich die Größe des Bildschirms ändert, werden die in der Höhe anders dargestellt, was doof aussieht. Wie kann ich es einstellen, dass die Größe immer gleich dargestellt wird? Ich habe es schon mit height="400px" versucht, aber auf dem Handy sieht es dann doof aus. Hier einmal der Quellcode:

Code:
div id="element-ce7c1faa-e82b-4754-a869-bd5a3b53906e" data-platform-element-id="694046499467037623-1.2.6" class="platform-element-contents" >
    <div class="callout-box-wrapper">
    <div class="callout-box--standard item">
        <div class="element-content">
            <div style="width: auto;><div></div><div><div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src="uploads/8/3/1/2/83128648/x2.png" alt="Bild" style="width:auto;max-width:100%" />
</a>
<div style="display:block;font-size:90%"></div>
</div></div>

<div class="wsite-spacer" style="height:10px;"></div>

<div class="paragraph" style="text-align:center;"><font size="5">Freundlicher Support</font></div>

<div class="paragraph" style="text-align:center;"><span><font size="4">Egal was Ihr Anliegen ist, unser Support wird sich jederzeit um Ihre Supportanfrage k&uuml;mmern. Und das vollkommen kostenlos.</font></span><br /></div></div>
        </div>
    </div>
</div>
</div>
<div style="clear:both;"></div><script type="text/javascript" class="element-script">function setupElement985654903763567491() {
    var elementRequire = require || _wAMD.require;
    elementRequire([
        'jquery',
        'underscore',
        'backbone',
        'util/platform/elements/PlatformElement',
        'util/platform/elements/PlatformElementSettings'
    ], function(
        $,
        _,
        Backbone,
        PlatformElement,
        PlatformElementSettings
    ) {
        var dependencies = null || [];
        var platform_element_id = "694046499467037623-1.2.6";

        if (typeof _W.loadedPlatformDependencies === 'undefined') {
            _W.loadedPlatformDependencies = [];
        }

        if (typeof _W.platformElements === 'undefined') {
            _W.platformElements = [];
        }

        if (typeof _W.platformElements[platform_element_id] === 'undefined') {
            _W.platformElements[platform_element_id] = {};
            _W.platformElements[platform_element_id].deferredObject = new $.Deferred();
            _W.platformElements[platform_element_id].deferredPromise = _W.platformElements[platform_element_id].deferredObject.promise();
        }

        if(_.intersection(_W.loadedPlatformDependencies, dependencies).length !== dependencies.length){
            _.reduce(dependencies, function(promise, nextScript){
                _W.loadedPlatformDependencies.push(nextScript);
                return promise.then(function(){
                    return $.getScript(nextScript);
                });
            }, $().promise()).then(function(){
                _W.platformElements[platform_element_id].deferredObject.resolve();
            });
        }

        if (dependencies.length === 0){
            _W.platformElements[platform_element_id].deferredObject.resolve();
        }

        _W.platformElements[platform_element_id].deferredPromise.done(function(){
            var _ElementDefinition = /**
* This is required for element rendering to be possible
* @type {PlatformElement}
*/
(function() {
   var CallOutBox = PlatformElement.extend({
       initialize: function() { }
   });

   return CallOutBox;
})();;

            if (typeof _ElementDefinition == 'undefined' || typeof _ElementDefinition == 'null') {
                var _ElementDefinition = PlatformElement.extend({});
            }

            var _Element = _ElementDefinition.extend({
                initialize: function() {
                    // we still want to call the initialize function defined by the developer
                    // however, we don't want to call it until placeholders have been replaced
                    this.placeholderInterval = setInterval(function() {
                        // so use setInterval to check for placeholders.
                        if (this.$('.platform-element-child-placeholder').length == 0) {
                            clearInterval(this.placeholderInterval);
                            this.constructor.__super__.initialize.apply(this);
                        }
                    }.bind(this), 100);
                }
            });

            _Element.prototype.settings = new PlatformElementSettings({"vertical-padding_each":[{"vertical-padding_index":0},{"vertical-padding_index":1},{"vertical-padding_index":2},{"vertical-padding_index":3},{"vertical-padding_index":4},{"vertical-padding_index":5},{"vertical-padding_index":6},{"vertical-padding_index":7},{"vertical-padding_index":8},{"vertical-padding_index":9},{"vertical-padding_index":10},{"vertical-padding_index":11},{"vertical-padding_index":12},{"vertical-padding_index":13},{"vertical-padding_index":14},{"vertical-padding_index":15},{"vertical-padding_index":16},{"vertical-padding_index":17},{"vertical-padding_index":18},{"vertical-padding_index":19}],"horizontal-padding_each":[{"horizontal-padding_index":0},{"horizontal-padding_index":1},{"horizontal-padding_index":2},{"horizontal-padding_index":3},{"horizontal-padding_index":4},{"horizontal-padding_index":5},{"horizontal-padding_index":6},{"horizontal-padding_index":7},{"horizontal-padding_index":8},{"horizontal-padding_index":9},{"horizontal-padding_index":10},{"horizontal-padding_index":11},{"horizontal-padding_index":12},{"horizontal-padding_index":13},{"horizontal-padding_index":14},{"horizontal-padding_index":15},{"horizontal-padding_index":16},{"horizontal-padding_index":17},{"horizontal-padding_index":18},{"horizontal-padding_index":19}],"background":"#ffffff","border_color":"#636363","style":"standard","border":"1px solid","vertical-padding":20,"horizontal-padding":20});
            _Element.prototype.settings.page_element_id = "985654903763567491";
            
            _Element.prototype.element_id = "ce7c1faa-e82b-4754-a869-bd5a3b53906e";
            _Element.prototype.user_id = "83128648";
            _Element.prototype.site_id = "557970195964349664";
            _Element.prototype.assets_path = "//marketplace.editmysite.com/elements/694046499467037623-1.2.6/assets/";
            new _Element({
                el: '#element-ce7c1faa-e82b-4754-a869-bd5a3b53906e'
            });
        });
    });
}

if (typeof document.documentElement.appReady == 'undefined') {
    document.documentElement.appReady = 0;
}

if (document.documentElement.appReady || (window.inEditor && window.inEditor())) {
    setupElement985654903763567491();
} else if (document.createEvent && document.addEventListener) {
    document.addEventListener('appReady', setupElement985654903763567491, false);
} else {
    document.documentElement.attachEvent('onpropertychange', function(event){
        if (event.propertyName == 'appReady') {
            setupElement985654903763567491();
        }
    });
}

</script></div></div>
Wenn du auf height="400px" stellst, dann ist es immer gleich hoch, nämlich 400px.
Wenn es dir auf dem Handy dann nicht gefällt, dann willst du es anscheinend doch nicht immer gleich hoch.
Du musst dich also erst mal entscheiden, was du willst und dann eine klare Frage stellen.

"Es sieht doof aus" ist übrigens eine sehr schwammige Aussage und keine Fehlerbeschreibung.
Mit solchen Aussagen kann dir keiner weiterhelfen, du musst schon konkret sagen, was nicht passt und wie es stattdessen sein soll.
Vielen Dank für die Antwort. Ich möchte, dass alle DIVs die Größe haben, die der Größte hat. Also wenn der größte 400px hat, sollen alle 400px groß sein, aber das nur auf einem Desktop PC. Wie kann ich das machen?