Question

无论屏幕尺寸如何，我都必须并排放置两个div。假设我有main-div。里面有两个div。在left-div我有一张图片。在right-div我有一些元素。

现在图片将在左侧，这些将在右侧。我可以通过

来做到这一点

.left-div {
    float: left;
    margin-right: 10px;

}

.right-div {
    float: left;
}

让我们说右边的一个有一个长句。当我缩小浏览器以查看较小显示中发生的情况时，right-div位于left-div之下。然后中的长句开始被包裹起来，因为我缩小了浏览器。

我想要两个div并排，并且右边的文本在我开始收缩浏览器时被包裹起来。

Answer 1

<强>更新

使用flexbox。此设计牢不可破。

.left {
  flex: 1 1 1%;
  padding-right: 1em;
  outline: 1px solid red;
}
.right {
  flex: 1 1 1%;
  padding-left: 1em;
  outline: 1px solid blue;
}
.flexBox {
  display: flex;
  justify-content: space-around;
  flex-flow: row wrap;
}
img {
  display: block;
  width: 100%;
  height: 100%;
}

<div class="flexBox">
  <div class="left">
    <img src="http://placehold.it/300x300/000/fff.png&text=IMG" />
  </div>
  <div class="right">
    <p>xxxxxxxxxxx
xxxxxxx
xxX
XXXXXXXXXXXXXXXXX
XXXXXXXX
XXXXXXX
XXXX XXXXXXXXXXXXXX
XXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXX XXXXX
XXXXXX</p>
    <p>XXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXX
XXXXXXXXXXXXXXXX
XXXXXXXXXXXX
XXXXXXXXX XXXXXXXXXXXXX
XXXXXXXXXXXXXX
XXXX XXXXXXXXXXXXXXXX
XXXXXXXXXX
XXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXX
XXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXX</p>
    <p>XXXXXXXXXXXXX
XXXXXXXXXXXX</p>
  </div>
</div>

Answer 2

您可以使用width:100%，但不是100％OK解决方案。解释为什么在这个问题中： How to make a div to fill a remaining horizontal space?

.left{
  border:2px solid black;
  width:120px;
  height:80px;
  float:left;
  margin-right:10px;
}
.right{
  width:100%;
}

<div class="left">
 some img
</div>
<p class="right">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

另一个解决方案是使用保证金：

.left{
  float:left;
  border:2px  solid black;
  width:120px;
  height:80px;
}
.right{
  margin-left:130px; /* width of your img + margin */
  width:auto; /*must be auto */
}

<div class="left">
  some img
</div>
<p class="right">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Answer 3

在你的css中添加几行：

.left-div {
    float: left;
    margin-right: 10px;
    width:calc(50% - 5px); /*half of margin-right*/
    display:block;
}

.right-div {
    float: left;
    display:block;
    width:calc(50% - 5px); /*half of margin-right from .left-div*/
}

当然，您可能需要一些溢出（因为图像）等。

fiddle example有点不同。

Answer 4

    .left-div {
        float: left;
        margin-right: 10px;
        width: 50%;

    }

   .right-div {
        max-width:45%;
   }

Answer 5

我只是浮动图像，所以你的文字可以环绕它。这看起来会更清晰。

#container{
    width: 100%;
    background: yellow;
}
#floated{
    float: left;
}

<div id="container">
    <div id="floated"><img src="http://www.dryeye.com.au/img/hero-eye.jpg"></div>
    Lorem 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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem 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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

Answer 6

为您的结果创建了demo小提琴。请检查希望它可以帮助你。

// JavaScript code for the BLE Discovery example app. // TODO: Add comments to functions, shorten long lines. $(document).ready( function() { }); /** BLE plugin, is loaded asynchronously so the variable is redefined in the onDeviceReady handler. */ var ble = null; // Application object. var app = {}; // BLE device scanning will be made with this interval in milliseconds. app.scanInterval = 5000; // Track whether scanning is ongoing to avoid multiple intervals. app.isScanning = false; // Time for last scan event. This is useful for // when the device does not support continuous scan. app.lastScanEvent = 0; // Application Constructor app.initialize = function() { this.bindEvents(); }; // Bind Event Listeners // // Bind any events that are required on startup. Common events are: // 'load', 'deviceready', 'offline', and 'online'. app.bindEvents = function() { document.addEventListener('deviceready', this.onDeviceReady, false); }; // deviceready Event Handler // // The scope of 'this' is the event. In order to call the 'receivedEvent' // function, we must explicity call 'app.receivedEvent(...);' app.onDeviceReady = function() { // The plugin was loaded asynchronously and can here be referenced. ble = evothings.ble; app.receivedEvent('deviceready'); }; app.receivedEvent = function(id) { console.log('Received Event: ' + id); }; app.scan = function(){ ble.stopScan(); $('#result').html('BLE device is scanning...'); ble.startScan(function(r){ //$('#result').html(''+JSON.stringify(r)+''); $('#result').html('<div class="device">'+r.name+' ['+r.address+'] '+r.rssi+'</div>'); $('#result').append('Connecting...'); app.connect(r.address); }, function(){ $('#result').html('BLE device scanning failed.'); }); } app.connect = function(address) { ble.stopScan(); //$('#result').append(''+address+''); ble.connect(address, function(r){ // state=2 deviceHandle=1 $('#result').html('Successfully connected '+JSON.stringify(r)+''); app.services(r.deviceHandle); }, function(errorCode){ $('#result').html('Connection failed ['+errorCode+'].'); }); }; app.services = function(deviceHandle){ ble.readAllServiceData(deviceHandle, function(services){ //$('#result').html(''+JSON.stringify(services)+''); app.read(deviceHandle); }, function(errorCode){ $('#result').html('Read services failed ['+errorCode+'].'); }); } app.read = function(deviceHandle){ /* ble.readCharacteristic(deviceHandle, 15, function(data){ $('#result').html('['+ble.fromUtf8(data)+']'); }, function(errorCode){ $('#result').html('Read failed ['+errorCode+'].'); }); */ ble.enableNotification(deviceHandle, 19, function(data){ $('#result').html('['+ble.fromUtf8(data)+'] '+data+''); }, function(errorCode){ $('#result').html('Enable notification failed ['+errorCode+'].'); }); ble.descriptors(deviceHandle,19, function(descriptors){ $('#result').html('['+descriptors[0].handle+']'); ble.writeDescriptor(deviceHandle, descriptors[0].handle, new Uint8Array([1,0]), function(){ $('#result').html('Write success.'); }, function(errorCode){ $('#result').html('Write failed ['+errorCode+'].'); }); setTimeout(function(){ ble.readDescriptor(deviceHandle, descriptors[0].handle, function(data){ $('#result').html('['+ble.fromUtf8(data)+'] '+data+''); }, function(errorCode){ $('#result').html('Read descriptor failed ['+errorCode+'].'); }) }, 10000); }, function(errorCode){ $('#result').html('Characteristics failed ['+errorCode+'].'); }); } $(document).on('click','#scan',app.scan);

Answer 7

我喜欢使用CSS表格：

＆＃13;

<div id="parent">
  <div>Left div</div>
  <div>Right div</div>
</div>

＆＃13;

display: inline-block

＆＃13;

无论屏幕尺寸如何，都要并排放置两个div

7 个答案: